如何在 React 中访问孩子的状态？

在 React 中，父组件可以通过 props 向子组件传递状态和方法，但是有时候父组件需要访问子组件的状态，这时候就需要用到子组件的 ref。

什么是 ref？

ref 是 React 中一个特殊的属性，它可以用来获取组件实例或者 DOM 元素。

在类组件中，可以通过 React.createRef() 创建一个 ref：

class MyComponent extends React.Component {
  constructor() {
    super();
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef}>Hello World!</div>;
  }
}

在函数式组件中，可以使用 useRef 钩子来创建 ref：

function MyComponent() {
  const myRef = React.useRef();
  return <div ref={myRef}>Hello World!</div>;
}

如何访问子组件的状态？

有了子组件的 ref 后，我们可以通过 ref.current 来访问子组件实例，从而访问其状态。

例如，我们有一个子组件 ChildComponent，它有一个名为 state 的状态，我们需要在父组件中访问这个状态：

class ParentComponent extends React.Component {
  constructor() {
    super();
    this.childRef = React.createRef();
  }
  handleClick() {
    const childState = this.childRef.current.state;
    console.log(childState);
  }
  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={()=>this.handleClick()}>Get Child State</button>
      </div>
    );
  }
}

需要注意的是，只有在子组件已经挂载到 DOM 树上后，才能访问其实例和状态。如果在子组件还没有挂载时就访问它的实例，会得到 undefined。因此，在父组件中访问子组件的状态应该在 componentDidMount 阶段或者事件处理函数中进行。

总结

ref 是 React 中一种非常有用的特性，在需要访问 DOM 元素或子组件实例时十分方便。但是，过度使用 ref 会使组件结构变得复杂，因此应该尽量避免滥用。