ReactJS-更改单独的类属性时更新组件

Question

In my project I have an html doc with some react code, for instance:

var Test = React.createClass({
  getInitialState: function() {
    return {storage: this.props.storage};
  },
  render: function() {
    return (
      <h2>
        {this.state.storage}
      </h2>
    );
  }
});

In another class, AppMan, I have a property called storageLeft . If I render the Test component like:

<Test storage={AppMan.storageLeft}/>

What is the correct way to go about updating the Test component whenever storageLeft is changed inside the AppMan class? I'm not sure if passing it as a property of the component is the right way to go about it. Initially, all I can think of is doing a setInterval and constantly doing this.setState({storage: AppMan.storageLeft}); or something along those lines. Any better ideas?

Answer 1

Setting state via props is an anti-pattern . You should save storageLeft in the AppMan component's state and then pass that state to the Test component as a prop. A component automatically re-renders itself and its children (if needed) when you change its state.

The docs state that:

To implement interactions, we introduce mutable state to the component. this.state is private to the component and can be changed by calling this.setState(). When the state updates, the component re-renders itself.

This way your components stay in sync when you pass state as a prop.

AppMan.js

<Test storage={this.state.storageLeft} />

Test.js

var Test = React.createClass({
  render: function() {
    return (
      <h2>
        {this.props.storage}
      </h2>
    );
  }
});