ReactJs警告：不推薦使用變體`style`。 考慮事先克隆它

Question

我收到以下警告：

inWarning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated. Consider cloning it beforehand. Check the `render` of `xxx`. Previous style: {backgroundColor: "#000000"}. Mutated style: {backgroundColor: "#002a09"}. 

在嘗試將一個樣式屬性分配給div時，即使克隆了原始對象（我也嘗試過使用JSON.parse（JSON.stringify（））而沒有成功）。

你能告訴我為什么我收到這個錯誤以及如何解決它。

   var clone = Object.assign({}, this.state.selectedColor);
   this.styles.previewColorHover.backgroundColor = clone.hex

在我的渲染功能中：

<div ref='previewColor' id={'preview-color-' + this.props.id}
    style={this.styles.previewColorHover}>
</div>

Answer 1

您沒有克隆previewColorHover

  var clone = Object.assign({}, this.styles.previewColorHover);
   this.styles.previewColorHover = clone;
   this.styles.previewColorHover.backgroundColor = this.state.selectedColor.hex

Answer 2

您正在克隆selectedColor對象而不是樣式對象。

做一些如下事情

var clone = Object.assign({}, this.state.selectedColor);
this.styles.previewColorHover.backgroundColor = clone.hex
var style = {};
style["previewColorHover"] = {backgroundColor : clone.hex}

並使用div中的樣式對象作為

<div ref='previewColor' id={'preview-color-' + this.props.id}
    style={style.previewColorHover}>
</div>