作出反應如何更新風格協調

Question

每當我試着在反應，例如像動態更新一些組件，在鼠標移動物體的位置，它拋出一個錯誤：

Warning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated. Consider cloning it beforehand. 

這是怎麼回事，然後可能如果我無法以任何方式更新對象樣式道具，請做任何形式的動態內容，例如交互式遊戲。至於克隆Reactjs建議的節點，在任何地方都沒有解釋如何實現與克隆元素相同的結果。

https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

這是不是在所有的幫助。

我的問題是，在mouseup事件（用戶想要刪除件）時，我想更新從更新的狀態屬性，即在渲染功能中獲取的新值的樣式道具。

<ComponentOne style={{left: this.state.left, top: this.state.top}} /> 

Answer 1

此警告來，因爲left或top是NaN。在getInitialState Function中初始化您的左側或頂部爲零或某個值。

getInitialState: function() { 
    return { 
     left:0, 
     top: 0 
    }; 

也克隆React-Element不會幫你在這裏。警告說當你修改它時你必須克隆你的樣式對象。這是可以做到

var style1 = {myProp: "value"}; 
var style2 = Object.assign({}, style1, {newProp:"newValue"}); 

而不是用這種方式直接將它們設置爲

<ComponentOne style={{left: this.state.left, top: this.state.top}} /> 

待辦事項

var myStyle = {left: this.state.left, top: this.state.top}; 
<ComponentOne style={myStyle} /> 

，然後根據您的更改克隆您myStyle的對象，並添加改變風格屬性。