props 和 state 是相关的。一个组件的状态通常会成为子组件的props。props在父级的 render 方法中作为第二个参数传递给子级,React.createElement()
或者,如果您使用的是 JSX,则是更熟悉的标记属性。
<MyChild name={this.state.childsName} />
父母的状态值childsName
成为孩子的this.props.name
。从孩子的角度来看,名称props是不可变的。如果需要更改,父级应该只更改其内部状态:
this.setState({ childsName: 'New name' });
React 会为你将它传播给孩子。一个自然的后续问题是:如果孩子需要更改其名称props怎么办?这通常通过子事件和父回调来完成。孩子可能会公开一个名为的事件,例如,onNameChanged
。然后,父级将通过传递回调处理程序来订阅该事件。
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
子进程将通过调用例如 将其请求的新名称作为参数传递给事件回调this.props.onNameChanged('New name')
,而父进程将在事件处理程序中使用该名称来更新其状态。
handleName: function(newName) {
this.setState({ childsName: newName });
}