reactjs - textos - errores de redaccion wikipedia

¿Cómo combinar múltiples objetos de estilo en línea?

Question

En React puede crear claramente un objeto y asignarlo como un estilo en línea. es decir. mencionado abajo.

var divStyle = {
color: ''white'',
backgroundImage: ''url('' + imgUrl + '')'',
WebkitTransition: ''all'', // note the capital ''W'' here
msTransition: ''all'' // ''ms'' is the only lowercase vendor prefix
};
var divStyle2 = {fontSize: ''18px''};
React.render(<div style={divStyle}>Hello World!</div>, mountNode);

¿Cómo puedo combinar varios objetos y asignarlos juntos?

Answer 1

A diferencia de React Native, no podemos pasar una variedad de estilos en React, como

<View style={[style1, style2]} />

En React, necesitamos crear el único objeto de estilos antes de pasarlo a la propiedad de estilo. Me gusta:

const Header = (props) => {
let baseStyle = {
color: ''red'',
}
let enhancedStyle = {
fontSize: ''38px''
}
return(
<h1 style={{...baseStyle, ...enhancedStyle}}>{props.title}</h1>
);
}

Hemos utilizado el operador ES6 Spread para combinar dos estilos. También puede usar Object.assign() para el mismo propósito.

Esto también funciona si no necesita almacenar su estilo en una var

<Segment style={{...segmentStyle, ...{height:''100%''}}}>
Your content
</Segment>

Answer 2

Array notaion es la mejor manera de combinar estilos en react native.

Esto muestra cómo combinar 2 objetos de estilo,

<View style={[className, {paddingTop: 25}]}>
<Text>Some Text</Text>
</View>

esto muestra cómo combinar el objeto y la propiedad Style,

<Text style={[styles.base, styles.background]} >Test </Text>

Esto funcionará en cualquier aplicación nativa de reacción.

Answer 3

Básicamente, estoy viendo esto de manera incorrecta. Por lo que veo, esta no es una pregunta específica de React, es más una pregunta de JavaScript sobre cómo combino dos objetos de JavaScript (sin alterar propiedades con nombres similares).

En esta respuesta de , lo explica. ¿Cómo puedo fusionar propiedades de dos objetos JavaScript dinámicamente?

En jQuery puedo usar el método extend.

Answer 4

Formas de estilo en línea:

<View style={[styles.red, {fontSize: 25}]}>
<Text>Hello World</Text>
</View>
<View style={[styles.red, styles.blue]}>
<Text>Hello World</Text>
</View>
<View style={{fontSize:10,marginTop:10}}>
<Text>Hello World</Text>
</View>

Answer 5

He creado un módulo para esto si desea agregar estilos basados ​​en una condición como esta:

multipleStyles(styles.icon, { [styles.iconRed]: true })

https://www.npmjs.com/package/react-native-multiple-styles

Answer 6

Para ampliar lo que dijo @PythonIsGreat, creo una función global que lo hará por mí:

var css = function(){
var args = $.merge([true, {}], Array.prototype.splice.call(arguments, 0));
return $.extend.apply(null, args);
}

Esto extiende profundamente los objetos a un nuevo objeto y permite un número variable de objetos como parámetros. Esto le permite hacer algo como esto:

return(
<div style={css(styles.base, styles.first, styles.second,...)} ></div>
);
var styles = {
base:{
//whatever
},
first:{
//whatever
},
second:{
//whatever
}
}

Answer 7

Para aquellos que buscan esta solución en React, si desea usar el operador spread dentro del estilo, debe usar: babel-plugin-transform-object-rest-spread.

Instálelo mediante el módulo npm y configure su .babelrc como tal:

{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread"]
}

Entonces puedes usar como ...

const sizing = { width: 200, height: 200 }
<div
className="dragon-avatar-image-background"
style={{ backgroundColor: blue, ...sizing }}
/>

Más información: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Answer 8

Para llevar esto aún más lejos, puede crear una función auxiliar similar a los classnames :

const styleRules = (...rules) => {
return rules.filter(Boolean).reduce((result, rule) => {
return { ...result, ...rule };
}, {});
};

Y luego úselo condicionalmente en sus componentes:

<div style={
styleRules(
divStyle,
(window.innerWidth >= 768) && divStyleMd,
(window.innerWidth < 768) && divStyleSm
)
}>Hello World!</div>

Answer 9

Puede hacer esto con Object.assign() .

En su ejemplo, haría:

ReactDOM.render(
<div style={Object.assign(divStyle, divStyle2)}>
Hello World!
</div>,
mountNode
);

Eso fusionará los dos estilos. El segundo estilo reemplazará al primero si hay propiedades coincidentes.

Como señaló Brandon, debe usar Object.assign({}, divStyle, divStyle2) si desea reutilizar divStyle sin que se aplique fontSize.

Me gusta usar esto para hacer componentes con propiedades predeterminadas. Por ejemplo, aquí hay un pequeño componente sin estado con un margin-right predeterminado:

const DivWithDefaults = ({ style, children, ...otherProps }) =>
<div style={Object.assign({ marginRight: "1.5em" }, style)} {...otherProps}>
{children}
</div>;

Entonces podemos renderizar algo como esto:

<DivWithDefaults>
Some text.
</DivWithDefaults>
<DivWithDefaults className="someClass" style={{ width: "50%" }}>
Some more text.
</DivWithDefaults>
<DivWithDefaults id="someID" style={{ marginRight: "10px", height: "20px"}}>
Even more text.
</DivWithDefaults>

Lo que nos dará el resultado:

<div style="margin-right:1.5em;">Some text.</div>
<div style="margin-right:1.5em;width50%;" class="someClass">Some more text.</div>
<div style="margin-right:10px;height:20px;" id="someID">Even more text.</div>

Answer 10

Puede usar el operador de propagación:

 <button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button

Answer 11

Si está usando React Native, puede usar la notación de matriz:

<View style={[styles.base, styles.background]} />

Mira mi publicación de blog detallada sobre esto.

Answer 12

También puede combinar clases con un estilo en línea como este:

<Text style={[styles.base, {color: ''red''}]} >Test </Text>

Answer 13

Object.assign() es una solución fácil, pero el uso (actualmente) de la respuesta principal de la misma, si bien está bien para hacer componentes sin estado, causará problemas para el objetivo deseado del OP de fusionar dos objetos de state .

Con dos argumentos, Object.assign() realidad mutará el primer objeto en el lugar, afectando futuras instancias.

Ex:

Considere dos posibles configuraciones de estilo para un cuadro:

var styles = {
box: {backgroundColor: ''yellow'', height: ''100px'', width: ''200px''},
boxA: {backgroundColor: ''blue''},
};

Por lo tanto, queremos que todas nuestras cajas tengan estilos de ''caja'' predeterminados, pero queremos sobrescribir algunas con un color diferente:

// this will be yellow
<div style={styles.box}></div>
// this will be blue
<div style={Object.assign(styles.box, styles.boxA)}></div>
// this SHOULD be yellow, but it''s blue.
<div style={styles.box}></div>

Una vez que Object.assign() ejecuta, el objeto ''styles.box'' cambia para siempre.

La solución es pasar un objeto vacío a Object.assign() . Al hacerlo, le está diciendo al método que produzca un NUEVO objeto con los objetos que le pasa. Al igual que:

// this will be yellow
<div style={styles.box}></div>
// this will be blue
<div style={Object.assign({}, styles.box, styles.boxA)}></div>
// a beautiful yellow
<div style={styles.box}></div>

Esta noción de objetos que mutan en el lugar es crítica para React, y el uso adecuado de Object.assign() es realmente útil para usar bibliotecas como Redux.