Comment combiner plusieurs objects de style en ligne?

Dans Réagir, vous pouvez clairement créer un object et lui atsortingbuer un style en ligne. c’est à dire. mentionné ci-dessous.

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(
Hello World!
, mountNode);

Comment puis-je combiner plusieurs objects et les affecter ensemble?

Si vous utilisez React Native, vous pouvez utiliser la notation de tableau:

  

Voir les documents pour plus d’informations.

Vous pouvez utiliser l’opérateur de propagation:

   

Vous pouvez le faire avec Object.assign() .

Dans votre exemple, vous feriez:

 ReactDOM.render( 
Hello World!
, mountNode );

Cela va fusionner les deux styles. Le second style remplacera le premier s’il existe des propriétés correspondantes.

Comme Brandon l’a noté, vous devez utiliser Object.assign({}, divStyle, divStyle2) si vous souhaitez réutiliser divStyle sans la fontSize appliquée.

J’aime l’utiliser pour créer des composants avec des propriétés par défaut. Par exemple, voici un petit composant sans état avec une margin-right par défaut:

 const DivWithDefaults = ({ style, children, ...otherProps }) => 
{children}
;

Donc, nous pouvons rendre quelque chose comme ceci:

  Some text.   Some more text.   Even more text.  

Ce qui nous donnera le résultat:

 
Some text.
Some more text.
Even more text.

Object.assign() est une solution simple, mais l’utilisation de la réponse (actuellement) la plus Object.assign() parfaitement à la création de composants sans état, pose des problèmes pour l’objective de fusion des deux state objects .

Avec deux arguments, Object.assign() va muter le premier object sur place, affectant les futures instanciations.

Ex:

Envisagez deux configurations de style possibles pour une boîte:

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

Donc, nous voulons que toutes nos boîtes aient des styles de «boîtes» par défaut, mais que vous souhaitiez écraser des couleurs différentes:

  //this will be yellow 
//this will be blue
//this SHOULD be yellow, but it's blue.

Une fois Object.assign() exécuté, l’object ‘styles.box’ est modifié pour de bon.

La solution consiste à transmettre un object vide à Object.assign() . Ce faisant, vous dites à la méthode de produire un object NEW avec les objects que vous lui transmettez. Ainsi:

  //this will be yellow 
//this will be blue
//a beautiful yellow

Cette notion d’objects mutants sur place est critique pour React , et l’utilisation correcte d’ Object.assign() est vraiment utile pour utiliser des bibliothèques comme Redux .

À la différence de React Native, nous ne pouvons pas passer de tableau de styles dans React, comme

  

Dans React, nous devons créer l’object unique des styles avant de le transmettre à la propriété style. Comme:

 const Header = (props) => { let baseStyle = { color: 'red', } let enhancedStyle = { fontSize: '38px' } return( 

{props.title}

); }

Nous avons utilisé l’ opérateur ES6 Spread pour combiner deux styles. Vous pouvez également utiliser Object.assign () dans le même but.

Cela fonctionne aussi si vous n’avez pas besoin de stocker votre style dans un var

  Your content  

Vous pouvez également combiner des classes avec un style en ligne comme ceci:

  Some Text  

Donc, fondamentalement, je regarde cela de manière erronée. D’après ce que je vois, il ne s’agit pas d’une question spécifique à React, mais plutôt d’une question de JavaScript sur la manière de combiner deux objects JavaScript (sans faire de bruit avec les propriétés nommées).

Dans cette réponse StackOverflow, il l’explique. Comment puis-je fusionner les propriétés de deux objects JavaScript de manière dynamic?

Dans jQuery je peux utiliser la méthode extend.

Pour développer ce que @PythonIsGreat a dit, je crée une fonction globale qui le fera pour moi:

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

Cela étend profondément les objects dans un nouvel object et permet un nombre variable d’objects en tant que parameters. Cela vous permet de faire quelque chose comme ceci:

 return( 
); var styles = { base:{ //whatever }, first:{ //whatever }, second:{ //whatever } }

J’ai construit un module pour cela si vous voulez append des styles basés sur une condition comme celle-ci:

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

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