Reactjs 如何组合多个内联样式对象？

在React中，可以清楚地创建对象并将其指定为内联样式。i、 e.。如下所述

var divStyle={
颜色：'白色'，
背景图片：'url（'+imgUrl+'），
WebKittTransition:'全部'，//注意这里的大写字母“W”
msTransition:'all'/'ms'是唯一的小写供应商前缀
};
var divStyle2={fontSize:'18px'}；
render（helloworld！，mountNode）；

---

如何组合多个对象并将它们指定在一起

所以基本上我是用错误的方式看待这个问题的。据我所见，这不是一个React特定的问题，更多的是一个JavaScript问题，即如何将两个JavaScript对象组合在一起（而不破坏类似命名的属性）

在这个答案中，它解释了这一点

---

在jQuery中，我可以使用extend方法

为了扩展@PythonIsGreat所说的内容，我创建了一个全局函数，它将为我实现这一点：

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

这将对象扩展到一个新对象中，并允许可变数量的对象作为参数。这允许您执行以下操作：

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

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

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

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

返回(
);
变量样式={
基数：{
//随便
},
第一:{
//随便
},
第二：{
//随便
}
}

您可以使用

Object.assign（）

执行此操作

在您的示例中，您将执行以下操作：

ReactDOM.render(
你好，世界！
,
mountNode
);

这将合并这两种样式。如果存在匹配的特性，则第二种样式将替换第一种样式

正如Brandon所指出的，如果要在不应用fontSize的情况下重用

divStyle

，则应该使用

Object.assign（{}，divStyle，divStyle2）

我喜欢使用它来创建具有默认属性的组件。例如，这里有一个小的无状态组件，具有默认的

右边距
：

constdivwithdefaults=（{style，children，…otherProps}）=>
{儿童}
;

因此，我们可以呈现如下内容：

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

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

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

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


一些文本。
还有一些文字。
更多的文本。

这将给我们一个结果：

一些文本。
还有一些文字。
更多的文本。
您可以使用扩展运算符：

Back
Object.assign（）
是一个简单的解决方案，但是（当前）对它的使用——虽然对于制作无状态组件来说很好，但会给OP合并两个
状态
对象的预期目标带来问题

使用两个参数，
Object.assign（）
将实际改变第一个对象，从而影响将来的实例化

例：

考虑框的两种可能的样式配置：

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

因此，我们希望所有框都具有默认的“框”样式，但希望用不同的颜色覆盖某些框：

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

对象就地变化的概念对于React非常关键，正确使用
Object.assign（）
对于使用Redux之类的库非常有用。
如果使用React Native，可以使用数组表示法：



查看我的详细信息。
如果您想根据条件添加样式，我已经为此构建了一个模块
像这样：

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

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

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

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

与React Native不同，我们不能在React中传递样式数组，如

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



在React中，我们需要先创建样式的单个对象，然后再将其传递给style属性。比如：

const Header = (props) => {
  let baseStyle = {
    color: 'red',
  }

  let enhancedStyle = {
    fontSize: '38px'
  }

  return(
    <h1 style={{...baseStyle, ...enhancedStyle}}>{props.title}</h1>
  );
}

const头=（道具）=>{
让baseStyle={
颜色：“红色”，
}
let enhancedStyle={
字体大小：“38px”
}
返回(
{props.title}
);
}

我们使用ES6将两种风格结合起来。您也可以出于同样的目的使用

如果不需要将样式存储在var中，也可以使用此方法

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


你的内容
您还可以将类与内嵌样式相结合，如下所示：

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

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

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

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


一些文本
对于在React中查看此解决方案的用户，如果您想在样式中使用spread操作符，则应使用：babel plugin transform object rest spread

通过npm模块进行安装，并将.lrc配置为：

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

然后你可以用像

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

const size={宽度：200，高度：200}

更多信息：
要进一步了解这一点，您可以创建一个类似于helper的函数：

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

import { StyleSheet } from 'react-native';

const styleJoiner = (...arg) => StyleSheet.flatten(arg);

然后在组件中有条件地使用它：

<div style={

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

}>Hello World!</div>

=768）和&divStyleMd，
（window.innerWidth<768）和&divStyleSm
)
}>你好，世界！
内联样式的方式：

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


你好，世界
你好，世界
你好，世界
数组标记是在react native中组合样式的最佳方法

这显示了如何组合2个样式对象

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

测试

这显示了如何组合样式对象和属性

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

测试

这将适用于任何react本机应用程序。
实际上，有一种正式的组合方式，如下所示：

<View style={[style01, style02]} />

通过使用my
styleJoiner随时随地可以组合任何类型的样式和样式。即使
未定义
或其他无用类型也不会破坏样式。
我发现这最适合我。它将按预期覆盖

return <View style={{...styles.local, ...styles.fromProps}} />

返回
const style1={
背景色：“2196F3”，
}
常量style2={
颜色：“白色”，
}
常量someComponent=（）=>{
return这有两种不同的样式
}

请注意双花括号。扩展运算符是您的朋友。
需要合并对象中的属性。
比如说,

const boxStyle = {
  width : "50px",
  height : "50px"
};
const redBackground = {
  ...boxStyle,
  background: "red",
};
const blueBackground = {
  ...boxStyle,
  background: "blue",
}




 <div style={redBackground}></div>
 <div style={blueBackground}></div>

const-boxStyle={
宽度：“50px”，
高度：“50px”
};
常数redBackground={
…箱式，
背景：“红色”，
};
常数蓝背景={
…箱式，
背景：“蓝色”，
}
在React中具有多个内联样式。

<div onClick={eleTemplate} style={{'width': '50%', textAlign: 'center'}}/>


此解决方案可能会误用
Object.assign（）
，从而导致一些不良后果。看看更可靠的解决方案。你的答案说明了一种滥用Ob的方法