你可以用Object.assign()来实现。

在你的例子中，你会这样做:

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

这样两种风格就合并了。如果有匹配的属性，则第二个样式将取代第一个样式。

正如Brandon所指出的，您应该使用Object。分配({}，divStyle, divStyle2)如果你想重用divStyle没有fontSize应用到它。

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

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

所以我们可以渲染如下内容:

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

它会给我们一个结果:

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

对于那些在React中寻找这个解决方案的人，如果你想在风格中使用扩散操作符，你应该使用:babel-plugin-transform-object-rest-spread。

通过npm模块安装它，并配置你的.babelrc:

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

然后你可以用like…

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

更多信息:https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Object.assign()是一个简单的解决方案，但是(目前)最常用的答案使用它——虽然用于制作无状态组件还不错，但会导致OP合并两个状态对象的理想目标出现问题。

有了两个参数，object .assign()实际上会原地改变第一个对象，从而影响未来的实例化。

Ex:

考虑一个盒子的两种可能的样式配置:

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

所以我们希望所有的盒子都有默认的“box”样式，但想用不同的颜色覆盖一些:

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

一旦Object.assign()执行，` styles. assign()Box的对象被永久更改。

解决方案是将一个空对象传递给object .assign()。这样做是在告诉该方法用传递给它的对象生成一个NEW对象。像这样:

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

对象在原地发生变化的概念对React至关重要，正确使用Object.assign()对于使用Redux等库非常有帮助。

与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>
  );
}

我们使用ES6 Spread运算符来组合两种风格。你也可以使用Object.assign()来达到同样的目的。

如果你不需要将你的样式存储在一个变量中，这也可以工作

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

    const style1 = {
        backgroundColor: "#2196F3", 
    }
    
    const style2 = {
        color: "white", 
    }

    const someComponent = () => {
        return <div style={{ ...style1, ...style2 }}>This has 2 separate styles</div> 
    }
    

注意双花括号。播音接线员是你的朋友。

所以基本上我看问题的方式是错误的。从我所看到的，这不是一个React特定的问题，更多的是一个JavaScript问题，在我如何结合两个JavaScript对象在一起(没有打击类似命名的属性)。

在这个StackOverflow的答案中，它解释了这一点。如何动态合并两个JavaScript对象的属性?

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