Question

在我的项目中，我有一个带有一些反应代码的html文档，例如：

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

在另一个类AppMan中，我有一个名为storageLeft的属性。如果我将Test组件渲染为：

<Test storage={AppMan.storageLeft}/>

在AppMan类中更改Test时，更新storageLeft组件的正确方法是什么？我不确定将它作为组件的属性传递是正确的方法。最初，我能想到的只是做一个setInterval并不断地按照这些方式做this.setState({storage: AppMan.storageLeft});或其他事情。有更好的想法吗？

Answer 1

通过 props 设置州是anti-pattern。您应该将storageLeft保存在AppMan组件的状态中，然后将该状态作为prop传递给Test组件。当您更改其状态时，组件会自动重新呈现自身及其子项（如果需要）。

docs表示：

为了实现交互，我们将可变状态引入零件。 this.state是组件的私有，可以更改通过调用this.setState（）。当状态更新时，组件重新渲染。

这样，当您将状态作为道具传递时，您的组件会保持同步。

AppMan.js

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

Test.js

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

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

1 个答案: