React中如何通过State的RGB值设置TD元素背景色？

嘿，我一眼就揪出你代码里的问题啦！问题出在<td>的style属性写法上——你在拼接RGB颜色字符串的时候，错误地给box.color多套了一层大括号，这直接导致JSX解析失败，浏览器根本识别不了正确的颜色值。

问题根源 #

你当前的代码片段：

<td style={{background: "rgb("+{box.color}+")"}}>{box.color}</td>

在JSX的表达式（也就是style={{ ... }}内部的大括号）里，{box.color}这种写法会被解析成插入一个对象，最终生成的颜色值会变成rgb([object Object])，这显然不是合法的RGB格式，背景色自然不会生效。

修复方案 #

这里有两种简单靠谱的修复方式：

方案1：修正字符串拼接，去掉多余的大括号

直接把box.color作为字符串拼接的一部分，不需要额外套大括号：

<tbody>
  {this.state.boxes.map((box, i) => <tr key={i}>
    <td>{box.name}</td>
    <td>{box.weight}</td>
    <td style={{background: "rgb(" + box.color + ")"}}>{box.color}</td>
    <td>{box.multiplier}</td>
  </tr>)}
</tbody>

（顺便提一句，给每个<tr>加上key属性是React列表渲染的最佳实践，能避免不必要的渲染警告哦）

方案2：使用ES6模板字符串，代码更简洁易读

用模板字符串可以让颜色拼接逻辑更清晰，彻底避免字符串拼接的语法错误：

<tbody>
  {this.state.boxes.map((box, i) => <tr key={i}>
    <td>{box.name}</td>
    <td>{box.weight}</td>
    <td style={{background: `rgb(${box.color})`}}>{box.color}</td>
    <td>{box.multiplier}</td>
  </tr>)}
</tbody>

额外小提示 #

如果你的box.color值偶尔带有空格（比如"138, 82, 82"）也不用担心，浏览器的RGB颜色解析支持这种带空格的格式，两种方案都能正常工作。

内容的提问来源于stack exchange，提问作者Johan Jönsson