Comment combiner plusieurs de style en ligne d'objets?

Si vous êtes à l'aide de Réagir Natif, vous pouvez utiliser la notation de tableau:

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

Voir le docs pour plus d'info.

Vous pouvez faire cela avec Object.assign().

Dans votre exemple, vous voulez faire:

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

Que la fusion des deux styles. Le deuxième style remplacera le premier si il y a correspondance de propriétés.

Que Brandon 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 faire des composants avec des propriétés par défaut. Pour exemple, voici un petit apatrides composant avec un défaut margin-right:

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

Afin que nous puissions rendre à quelque chose comme ceci:

<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>

Ce qui va nous donner le résultat:

<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>

Object.assign() est une solution facile, mais l' (actuellement) réponse sommet's de l'utilisation de celui — ci- alors que l'amende juste pour faire des apatrides, des composants, de causer des problèmes pour l'OP de l'objectif souhaité de la fusion de deux state objets.

Avec deux arguments, Object.assign() va muter en réalité le premier objet en place, affectant l'avenir instanciations.

Ex:

Deux possibilités style configs pour une boîte:

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

Si nous voulons que tous nos boites par défaut "boîte" de styles, mais que vous souhaitez le remplacer certains avec une couleur différente:

//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>

Une fois Object.assign() s'exécute, les 'styles.case " objet est changé pour de bon.

La solution est de passer d'un objet vide à Object.assign(). Ce faisant, vous indiquez la méthode utilisée pour produire un NOUVEL objet avec les objets que vous la transmettre. Comme:

//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>

Cette notion d'objets de la mutation en place est essentielle pour Réagir, et la bonne utilisation de Object.assign() est vraiment très utile pour l'utilisation des bibliothèques comme Redux.

Tableau notaion est la meilleure façon de combiner les styles de réagir natif.

Cela montre comment combiner 2 objets Style,

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

cela montre comment combiner le Style de l'objet et la propriété,

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

Cela fonctionne sur n'importe quel réagir application native.

D'aller encore plus loin, vous pouvez créer un les noms de classe-comme fonction d'assistance:

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

Et ensuite l'utiliser de façon conditionnelle dans vos composants:

<div style={

  styleRules(
    divStyle,
    (window.innerWidth >= 768) && divStyleMd,
    (window.innerWidth < 768) && divStyleSm
  )

}>Hello World!</div>

À Étendre sur ce que @PythonIsGreat dit, j'ai créer une fonction globale qui va le faire pour moi:

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

Profondément s'étend aux objets dans un nouvel objet et permet un nombre variable d'objets comme paramètres. Cela vous permet de vous faire quelque chose comme ceci:

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

var styles = {
  base:{
    //whatever
  },
  first:{
    //whatever
  },
  second:{
    //whatever
  }
}

Façons de inline style:

<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>