JSX 元素上的样式属性未正确更新

Question

我有这个组件，

var ColorList = React.createClass({
  render: function(){
    var styles = {
      colorBG: {
        width: 100,
        height: 100,
        display: "inline-block",
        border: "1px solid black"
      }
    };
    var colors = [
      {color: "red", hex: "#E74C3C"},
      {color: "white", hex: "#ECF0F1"},
      {color: "blue", hex: "#3498DB"},
      {color: "yellow", hex: "#E7D171"},
      {color: "green", hex: "#7AE77C"}
    ];
    var colorList = colors.map(function(item){
      styles.colorBG.background = item.hex;
      return (
        <span style={styles.colorBG} key={item.color}>{styles.colorBG.background}</span>
      )
    });

    return (
      <div>
        {colorList}
      </div>
    )
  }
});

但有趣的是，尽管元素 (styles.colorBG.background) 中的文本工作正常，但元素的背景颜色只是颜色数组中的最后一项。

有什么想法吗？

Fiddle Here

Answer 1

问题的出现是因为您每次都在实际的 styles 对象上设置 background 属性。如果您 深度复制 您的 styles 对象，它应该可以正常工作。

这是我使用 React.addons.update 进行深层复制的示例。但是您也可以使用其他深拷贝方法。

jsFiddle: http://jsfiddle.net/wmg0eq18/

 var colorList = colors.map(function(item){
      // styles.colorBG.background = item.hex;
      var newStyle = React.addons.update(styles, {
          colorBG: {background:  {$set: item.hex}}
      });
      return <span style={newStyle.colorBG} key={item.color}>{styles.colorBG.background}</span>;
 });

JSX 元素上的样式属性未正确更新

style Property on JSX Element Not Updating Properly

reactjs

JSX 元素上的样式 属性 未正确更新

style Property on JSX Element Not Updating Properly

reactjs

JSX 元素上的样式属性未正确更新