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

出现问题的原因是您每次都在实际的background对象上设置styles属性。如果您深层复制您的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元素上的样式属性未正确更新

1 个答案: