父组件轻松调用子组件方法：React Hooks 和 forwardRef 的魔力

前端

2024-02-09 12:22:55

在 React 应用程序中使用 forwardRef 和 useRef 实现组件间的通信

简介

React 是一个强大的 UI 开发库，提供了广泛的特性和工具，包括 React Hooks 和 forwardRef。利用这些特性，我们可以轻松地在 React 应用程序中实现组件之间的通信，从而创建动态且交互丰富的用户界面。

子组件中使用 forwardRef

要允许父组件引用子组件，我们需要在子组件中使用 forwardRef 方法。forwardRef 接受一个函数作为参数，该函数返回一个带有 ref 属性的对象。此 ref 属性允许父组件在子组件实例化后获取对子组件的引用。

父组件中使用 useRef

在父组件中，我们需要使用 useRef 钩子来创建对子组件实例的引用。useRef 钩子返回一个对象，该对象的 current 属性指向 DOM 节点或组件实例的当前值。

示例

以下是一个示例，说明如何在子组件中使用 forwardRef 和如何在父组件中使用 useRef 来调用子组件方法：

子组件：

import { forwardRef } from "react";

const ChildComponent = forwardRef((props, ref) => {
  const childMethod = () => {
    // 子组件方法的逻辑
  };

  return <div ref={ref}>子组件</div>;
});

父组件：

import { useRef } from "react";

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

  const callChildMethod = () => {
    if (childRef.current) {
      childRef.current.childMethod();
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={callChildMethod}>调用子组件方法</button>
    </div>
  );
};