在详细介绍如何访问子组件的状态之前,请务必阅读Markus-ipse关于处理此特定场景的更好解决方案的回答。
如果您确实希望访问组件的子组件的状态,您可以为每个子组件分配一个名为ref的属性。现在有两种实现引用的方法:使用React.createRef()和回调引用。
使用React.createRef ()
从React 16.3开始,这是目前推荐的使用引用的方式(更多信息请参阅文档)。如果您正在使用较早的版本,那么请参阅下面关于回调引用的内容。
您需要在父组件的构造函数中创建一个新的引用,然后通过ref属性将其分配给子组件。
class FormEditor extends React.Component {
constructor(props) {
super(props);
this.FieldEditor1 = React.createRef();
}
render() {
return <FieldEditor ref={this.FieldEditor1} />;
}
}
为了访问这种类型的引用,你需要使用:
const currentFieldEditor1 = this.FieldEditor1.current;
这将返回已挂载组件的实例,因此您可以使用currentfieleditor1。State访问状态。
简单说明一下,如果你在DOM节点上使用这些引用,而不是在组件上使用(例如<div ref={this。divRef} />),则this.divRef.current将返回底层DOM元素而不是组件实例。
回调参
此属性接受一个回调函数,该函数将引用传递给附加的组件。这个回调在组件挂载或卸载后立即执行。
例如:
<FieldEditor
ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;}
{...props}
/>
在这些例子中,引用存储在父组件上。要在代码中调用此组件,您可以使用:
this.fieldEditor1
然后使用this. fieleditor1。状态得到状态。
有一件事要注意,确保你的子组件在你试图访问它^_^之前已经呈现
如上所述,如果你在DOM节点上使用这些引用,而不是在组件上使用(例如<div ref={(divRef) => {this。myDiv = divRef;}} />)那么这个。divRef将返回底层DOM元素,而不是组件实例。
进一步的信息
如果你想阅读更多关于React的ref属性的内容,请查看Facebook的这个页面。
确保你阅读了“不要过度使用Refs”部分,该部分说你不应该利用孩子的状态来“让事情发生”。