javascript - 如何在 React 中访问 child 的状态

Question

我有以下结构:

FormEditor - 保存多个 FieldEditor 实例FieldEditor - 编辑表单的字段并在其状态中保存有关它的各种值

当在 FormEditor 中单击按钮时，我希望能够从所有 FieldEditor 组件中收集有关字段的信息、处于其状态的信息，并将其全部包含在 FormEditor 中。

我考虑将有关字段的信息存储在 FieldEditor 的状态之外，并将其置于 FormEditor 的状态中。但是，这将需要 FormEditor 监听其每个 FieldEditor 组件，因为它们发生变化并将其信息存储在其状态中。

我不能只访问 child 的状态吗？理想吗？

Answer 1

在我详细介绍如何访问子组件的状态之前，请务必阅读 Markus-ipse的答案关于处理这种特定情况的更好解决方案。

如果您确实希望访问子组件的状态，您可以分配一个名为 ref 的属性。给每个 child 。现在有两种实现引用的方法: 使用 React.createRef()和回调引用。

使用 React.createRef()

从 React 16.3 开始，这是目前推荐的使用引用的方式(参见 the documentation 了解更多信息)。如果您使用的是早期版本，请参阅下面的回调引用。

您需要在父组件的构造函数中创建一个新引用，然后通过 ref 将其分配给子组件属性。

class FormEditor extends React.Component {
  constructor(props) {
    super(props);
    this.FieldEditor1 = React.createRef();
  }
  render() {
    return <FieldEditor ref={this.FieldEditor1} />;
  }
}

为了访问这种 ref，您需要使用:

const currentFieldEditor1 = this.FieldEditor1.current;

这将返回已安装组件的实例，以便您可以使用 currentFieldEditor1.state访问状态。

简单说明一下，如果您在 DOM 节点而不是组件上使用这些引用(例如 <div ref={this.divRef} /> )，那么 this.divRef.current将返回底层 DOM 元素而不是组件实例。

回调引用

此属性接受一个回调函数，该函数传递一个对附加组件的引用。该回调在组件被挂载或卸载后立即执行。

例如:

<FieldEditor
    ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;}
    {...props}
/>

在这些示例中，引用存储在父组件中。要在您的代码中调用此组件，您可以使用:

this.fieldEditor1

然后使用 this.fieldEditor1.state获取状态。

有一点需要注意，确保你的子组件在你尝试访问它之前已经渲染好了^_^

如上所述，如果您在 DOM 节点而不是组件上使用这些引用(例如 <div ref={(divRef) => {this.myDiv = divRef;}} />)，那么 this.divRef将返回底层 DOM 元素而不是组件实例。

更多信息

如果您想了解更多关于 React 的 ref 属性的信息，请查看 this page来自 Facebook。

确保您阅读了“Don't Overuse Refs”部分，该部分说您不应该使用 child 的 state “让事情发生”。