反应如何更新样式坐标

Question

每当我尝试动态更新react中的某个组件时，例如，对象在mousemove上的位置，它确实会抛出错误：

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事件上（用户想要删除它），我想更新样式道具，以获取从更新的状态属性中获取的新值，即在render函数中。

<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对象并向其添加更改的样式属性。