风格属性不正确更新

我有这个成分，风格属性不正确更新

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

来源

2015-02-08 Tyler McGinnis

问题就出现了，因为你的实际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>; 
});

来源

2015-02-08 11:05:14 nilgun

有趣。这是我的第一次预感，但{styles.colorBG.background}显示正确的文字使我无法摆脱它。是否因为{styles.colorBG.background}被计算为一个字符串，该字符串不会被引用传递，而是原始对象呢？ – 2015-02-08 17:15:24

' {styles.colorBG.background}'编译为'React.createElement（“span”，{style：styles.colorBG，key：item .color}，styles.colorBG.background）'。就像你说的那样，'styles.colorBG.background'是作为一个字符串参数传递的，它引用了字符串本身。 – nilgun 2015-02-08 18:27:16

有道理。谢谢@nilgun！ – 2015-02-08 18:47:34

风格属性不正确更新

回答

相关问题