想了解更多关于 Props & State

Question

我尝试阅读有关 JS 和 React 的书籍和观看视频，但我仍然没有更好地理解 React-Props & States。有人可以详细解释一下吗？

Answer 1

道具 Components Props 可以被认为是一个组件的选项。它们作为组件的参数提供，看起来与 HTML 属性完全一样。

值得注意的是，一个组件不应该改变它的 props，它们是不可变的。如果组件具有可变数据，请使用状态对象。

var Photo = React.createClass({
  render: function() {
    return (
      <div className='photo'>
        <img src={this.props.src} />
        <span>{this.props.caption}</span>
      </div>
    );
  }
});

React.render(<Photo src='http://example.com/lkevsb9' caption='Hong Kong!' />, document.body);

州状态对象在组件内部。它保存可以随时间变化的数据。

在使用状态之前，我们需要为初始状态声明一组默认值。这是通过定义一个名为 getInitialState() 的方法并返回一个对象来完成的。

状态是使用 setState 方法设置的。调用 setState 触发 UI 更新。设置状态只能在组件内部完成。

var InterfaceComponent = React.createClass({
  getInitialState : function() {
    return {
      name : "chris"
    };
  },
  handleClick : function() {
    this.setState({
      name : "bob"
    });
  },
  render : function() {
    return <div onClick={this.handleClick}>
      hello {this.state.name}
    </div>;
  }
});

React.renderComponent(
  <InterfaceComponent />,
  document.body
);

想了解更多关于 Props & State

Want to know more about Props & State

javascript

reactjs

react-redux