ReactJS中使用const字符串修改组件样式失效问题排查

你这段代码的问题出在多余的内层花括号上：

style={{ color: {newColor} }}

React的style属性接受一个对象，外层的{}是JSX用来嵌入JS表达式的语法，而你在color的值里又加了一层{}，这会把newColor解析成一个对象（相当于{newColor: newColor}），而不是你定义的字符串变量，浏览器自然无法识别这个非法的颜色值，所以样式不生效。

解决方法就是去掉内层的花括号，直接引用变量：

style={{ color: newColor }}

举个完整的示例：

const newColor = '#ff0000';
// 正确写法
<div style={{ color: newColor }}>测试文本</div>

简单总结：JSX里的{}是用来把JS代码插入到HTML结构的标记，style本身就是一个JS对象，里面的属性值直接写变量或静态值就行，不需要额外套括号。

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