ReactJS如何使用样式对象替代内联样式？代码异常求解

嘿，这个问题其实是React对style属性的语法要求导致的，我来给你理清楚其中的逻辑～

为什么第一种写法可行？ #

React的style属性要求接收一个JavaScript对象，而JSX里要嵌入JS表达式必须用外层的{}包裹。你第一种写法里的{{color:"red"}}，其实是：

• 外层{}：告诉JSX这里是一个JS表达式
• 内层{color:"red"}：就是符合要求的样式对象（键是CSS属性的驼峰写法，值是样式值）

所以React能正确解析这个样式对象，渲染出红色的文字。

为什么第二种写法无效？ #

你写的<h1 style={{styles}}>Foo</h1>，相当于在JSX里嵌入了{styles}这个表达式，但最终传递给style的是一个嵌套对象：{ styles: { color: "red" } }——这完全不符合React的要求，因为React期望的是直接包含CSS键值对的对象，不是这种嵌套结构，所以样式自然不会生效。

实现样式复用的正确写法 #

想要便捷复用样式，其实只需要把样式对象直接传给style属性就行，不需要多套一层大括号：

基础复用写法 #

var styles = { color:"red" }
ReactDOM.render( <h1 style={styles}>Foo</h1>, document.getElementById("root") )

扩展样式（基础样式+额外样式） #

如果需要在基础样式上添加新样式，可以用对象展开运算符（ES6+语法）来合并对象：

// 基础样式，可复用
var baseStyles = { 
  color: "red",
  fontSize: "16px",
  padding: "8px"
}

// 基于基础样式扩展新样式
var headingStyles = {
  ...baseStyles,
  fontWeight: "bold",
  borderBottom: "1px solid #eee"
}

ReactDOM.render( <h1 style={headingStyles}>Foo</h1>, document.getElementById("root") )

这样就能轻松复用样式，不用每次重复写相同的代码啦～

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