React18 中实现子组件向父组件暴露数据和方法的实践

在 React 中实现子组件向父组件暴露数据和方法的实践

在 React 的组件开发中，我们经常需要实现父子组件之间的通信。通常情况下，我们使用 props 从父组件向子组件传递数据和方法。但在某些特殊场景下，我们需要让子组件主动暴露数据和方法给父组件。本文将通过一个具体示例来演示如何实现这一需求。

示例代码解析

子组件：exposeChildDataToFather.tsx

import { forwardRef, useImperativeHandle, useState } from "react";

// 定义子组件的 ref 类型
export interface ChildRef {
  childData: string;
  refreshData: () => void;
}

// 子组件
const ChildComponent = forwardRef<ChildRef>((props, ref) => {
  const [data, setData] = useState("子组件的数据");

  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    childData: data,
    refreshData: () => {
      setData(`新的数据 ${Date.now()}`);
    },
  }));

  return (
    <div>
      <p>子组件内容</p>
    </div>
  );
});

export default ChildComponent;

在这个子组件中，我们使用了 forwardRef 和 useImperativeHandle 来暴露子组件的数据和方法：

1. 定义接口：首先定义了一个 ChildRef 接口，用于描述子组件希望暴露给父组件的数据结构。
2. 使用 forwardRef：通过 forwardRef 高阶函数包装组件，使其可以接收一个 ref。
3. 使用 useImperativeHandle：通过 useImperativeHandle 自定义通过 ref 暴露出来的实例值，这里我们暴露了 [childData](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\components\exposeChildDataToFather.tsx#L4-L4) 数据和 [refreshData](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\components\exposeChildDataToFather.tsx#L5-L5) 方法。

父组件：index.tsx

import { useRef } from "react";
import ChildComponent, { ChildRef } from "./components/exposeChildDataToFather";

const App: React.FC = () => {
  const childRef = useRef<ChildRef>(null);

  const handleGetData = () => {
    if (childRef.current) {
      console.log("子组件数据:", childRef.current.childData);
      childRef.current.refreshData();
    }
  };

  return (
    <div>
      <h2>父组件</h2>
      <ChildComponent ref={childRef} />
      <button onClick={handleGetData}>获取子组件数据</button>
    </div>
  );
};

export default App;

在父组件中，我们通过 useRef 创建一个引用，并将其绑定到子组件上，然后通过这个引用来访问子组件暴露的数据和方法：

1. 创建引用：使用 useRef 创建一个类型为 ChildRef 的引用 childRef。
2. 绑定引用：将 childRef 绑定到子组件的 ref 属性上。
3. 调用子组件方法：在按钮点击事件中，通过 childRef.current 访问子组件暴露的数据和方法。

实现效果

运行项目后，当你点击“获取子组件数据”按钮时，将会发生以下事情：

• 控制台会输出子组件当前的数据。
• 调用子组件的 [refreshData](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\components\exposeChildDataToFather.tsx#L5-L5) 方法，更新子组件内部的数据。

这种机制非常适合用于需要从父组件直接操作子组件的场景，例如表单验证、动画控制等。

总结

通过 forwardRef 和 useImperativeHandle，我们可以优雅地实现子组件向父组件暴露数据和方法的需求。虽然这种方式打破了 React 单向数据流的设计理念，但在某些特定场景下非常实用。不过需要注意的是，这种模式应谨慎使用，过度依赖可能会导致组件间的耦合度过高，影响代码的可维护性。