All geek questions in one place

How to update style coordinates

Whenever I try to dynamically update a component in a reaction, for example, the position of an object on mousemove, it causes an error:

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

How can then do any dynamic things, such as interactive games, if I can’t update the object style details in any way. Regarding the cloning of the node that Reactjs offers, nowhere is it explained how to achieve the same result using cloning elements.

https://facebook.imtqy.com/react/docs/top-level-api.html#react.cloneelement

This is not entirely useful.

My problem is that at the mouseup event (users want to drop the part) I would like to update the style details for new values ​​taken from the updated state property, i.e. inside the rendering function.

 <ComponentOne style={{left: this.state.left, top: this.state.top}} />
+5
source share
1 answer

This warning appears because left or top NaN . Initialize your left or top zero or some value in the getInitialState Function .

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

Also, cloning React-Element will not help you. The warning says that you should clone your style object when you make changes to it. What can be done as

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

Instead of installing them directly as

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

Do so

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

And then, based on your changes, clone your myStyle object and add the changed style properties to it.

+3
source

Source: https://habr.com/ru/post/1244047/

More articles:


All Articles