反应如何更新样式坐标

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