React组件如何合并多个JSX样式对象？

当然可以啦！在React里合并多个样式对象是非常实用的操作，能让你的样式代码更模块化、更易维护，不用把所有样式都堆在一个对象里。下面给你几种常用的方法：

1. 用ES6展开运算符（最推荐） #

这是现在React项目里最常用的方式，语法简洁直观，还能避免修改原有的样式对象。你只需要用...把多个样式对象“展开”到一个新对象里就行，如果有重复的样式属性，后面的对象会覆盖前面的。

比如把你示例里的containerStyle和right合并到footer的样式中，代码可以改成这样：

export default class Footer extends React.Component{
  render(){
    const inline = { display: "inline-block", margin: "3px" };
    const right = { textAlign: "right" };
    const containerStyle = { padding: "8px", color: "#DDD", backgroundColor: "#000", fontSize: "12pt" };
    
    // 合并两个样式对象到新的footerStyle
    const footerStyle = { ...containerStyle, ...right };
    
    return( 
      <footer style={footerStyle}> 
        <div style={{...inline}}>
          Managed By <a href="http://www.midnighthtml.com">MidnightHTML</a>
        </div>
      </footer>
    );
  }
}

要是你想直接在JSX里合并，也可以这么写：<footer style={{...containerStyle, ...right}}>，省去单独定义footerStyle的步骤。

2. 用Object.assign()方法 #

如果你需要兼容ES5环境，或者习惯用这个方法，也可以用Object.assign()。不过要注意，它会修改第一个参数对象，所以最好传一个空对象作为第一个参数，避免污染原有的样式对象：

// 合并containerStyle和right到新对象
const footerStyle = Object.assign({}, containerStyle, right);

这里的顺序同样重要，后面的对象会覆盖前面的同名属性，和展开运算符的逻辑一致。

小提醒 #

• 内联样式的优先级比CSS类（className）的样式高，所以如果合并后的样式和类里的样式冲突，内联的会生效。
• 记得React内联样式的属性是驼峰命名（比如textAlign而不是text-align），你示例里的写法已经是对的啦！

内容的提问来源于stack exchange，提问作者Kenny Hammerlund