react父组件如何获取子组件实例

在 React 中，父组件获取子组件实例有几种常见的方法：

1. 使用 Refs：在父组件中，可以通过使用 `ref` 属性为子组件创建一个 ref，并将其附加到子组件实例上。然后可以通过 `ref.current` 来访问子组件实例。例如：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.childRef.current); // 访问子组件实例
  }

  render() {
    return <ChildComponent ref={this.childRef} />;
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

2. 使用回调函数：在子组件中定义一个接受子组件实例作为参数的回调函数，并通过属性传递给子组件。子组件在合适的时机调用该回调函数，将自身实例作为参数传递给父组件。例如：

class ParentComponent extends React.Component {
  handleChildRef = (childRef) => {
    console.log(childRef); // 访问子组件实例
  };

  render() {
    return <ChildComponent onRef={this.handleChildRef} />;
  }
}

class ChildComponent extends React.Component {
  componentDidMount() {
    this.props.onRef(this); // 将子组件实例传递给父组件
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

这两种方法都可以让父组件获取子组件实例。在选择使用哪种方法时，可以根据具体的场景和需求来决定。一般来说，使用 Refs 是最常用的方式，但如果需要在子组件挂载后立即获取实例，则使用回调函数的方式更适合。