React 中如何从父组件调用子组件方法？

从父组件调用子方法

在React中，组件之间的通信通常是通过props（属性）和事件来实现的，但是它可以使用引用从父组件访问和调用子组件方法。

方法调用使用Refs

1. 将子组件包装在forwardRef中：要访问子组件实例，请将其包装在forwardRef中。这允许 React 将 ref 作为第二个参数传递给组件。
2. 初始化子实例 Ref： 在父组件中，使用 useRef() 创建一个 ref。这将存储对子组件实例的引用。
3. 将引用分配给子组件：使用 ref 属性将引用传递给子组件。这会将子组件实例分配给父组件的引用。
4. 公开子方法： 在子组件中，使用 useImperativeHandle 返回一个包含要向父组件公开的方法的对象。

示例Hooks

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("getAlert from Child");
    }
  }));

  return <h1>Hi</h1>;
});

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

ReactDOM.render(<Parent />, document.getElementById('root'));

在此示例中， getAlert() 是 Child 组件公开的方法，可以通过访问 childRef 的当前属性从 Parent 组件调用该方法。请注意，不建议直接从父级调用子方法，并且应该避免，以支持正确的组件通信模式。

以上是React 中如何从父组件调用子组件方法？的详细内容。更多信息请关注PHP中文网其他相关文章！