组件第一次渲染后，对象变为只读

Question

The issue occurs when I try to upgrade React 15.X to React 16.X:

let style = {
  width:12
};
class Box extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {

    console.log(Object.getOwnPropertyDescriptor(style,'width'))

    style.width = 96;

    return (
      <div style={style}>

      </div>
    );
  }
}

outputs:

• {value: 12, writable: true , enumerable: true, configurable: true}
• {value: 12, writable: false , enumerable: true, configurable: false}
• {value: 12, writable: false, enumerable: true, configurable: false}

Anyone knows why the 'writable' becomes false?

Answer 1

Because mutating the style object is forbidden, and somewhere in the rendering process, Object.freeze(style) is called.

Ref:

• https://github.com/facebook/react/issues/11520#issuecomment-343731614
• Why was mutating style deprecated?

Object mutation in React has long been discouraged. Object.freeze(props) is enforced back in v0.xx days. In v16 Object.freeze(style) is added.

Answer 2

Try use

<div style={this.style}>

For me its working after using this

Update

If I'm not wrong you want to effect your style after dynamically change, in this case you have to use state, Here is my idea

You have to declare state for your style like this

class Box extends React.Component {      
    state = {
        style: {
          width: 12
        }
    }

Here is my render

render() {
    console.log(Object.getOwnPropertyDescriptor(this.state.style, "width"));

    return (
      <div style={this.state.style}>
        <button onClick={this.handleChangeStyle}>Change Style</button>
      </div>
    );
  }

And here is my handle method

handleChangeStyle = () => {
    let style = { ...this.state.style };
    style.width += 1;
    this.setState({ style });
  };