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

在 React 中从其父组件调用子组件方法

在 React 应用程序中，通常需要从子组件中调用子组件中定义的方法父组件。虽然有多种方法可以实现此目的，但本文重点介绍一种利用引用的流行方法。

通过引用进行命令性方法暴露

引用允许开发人员访问渲染的组件的元素并与它们交互。以前，refs 仅受基于类的组件支持，但随着 React Hooks 的引入，它们现在也可以在函数式组件中使用。

在函数组件中使用forwardRef

要使函数组件可以通过 refs 访问，需要将其包装在forwardRef 中。这使我们可以访问 ref 对象，该对象可以通过 ref 属性进行分配，并作为第二个参数传递给函数组件。

使用 UseImperativeHandle 公开方法

要在子组件上公开方法，我们使用 useImperativeHandle 挂钩。这个钩子有两个参数：一个 ref 对象和一个回调函数。回调函数返回一个将扩展组件实例的对象。通过在返回的对象中提供方法，我们可以通过引用来访问它。

代码片段示例

让我们演示如何从父级调用子方法使用 refs 和 useImperativeHandle 钩子的组件：

Child组件

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>
  );
};

在这个例子中，子组件通过ref暴露了getAlert方法，可以从通过访问父组件的当前属性ref.

注意： 重要的是要记住，通常不鼓励在子组件上公开命令式方法，而倾向于采用更加数据驱动和声明性的方法。但是，在某些需要直接访问子组件功能的场景中，此方法可能很有用。

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