关于React父组件调用子组件方法forwardRef的详解和案例

鹏多多2025-09-26 15:10

1. 前言

在 React 组件开发中，我们经常需要将 ref 传递给子组件，以便直接访问子组件的 DOM 节点或实例。但默认情况下，ref 是不能直接传递给子组件的，这就需要使用 React 提供的 forwardRef 功能。本文将深入探讨 forwardRef 的用法、使用场景及相关注意事项，帮助你在开发中更灵活地处理 ref 传递。

2. forwardRef概述

forwardRef 是 React 提供的一个高阶组件（Higher-Order Component, HOC），用于将 ref 从父组件直接传递给子组件的 DOM 节点或实例。它允许你在不破坏组件封装性的前提下，让父组件能够访问子组件内部的 DOM 元素。

其基本语法如下：

jsx 复制代码 
const ComponentWithRef = React.forwardRef((props, ref) => {
  // 组件逻辑
  return <div ref={ref}>{props.children}</div>;
});

forwardRef 接收一个函数作为参数，这个函数有两个参数：props 和 ref。你可以在组件内部将这个 ref 绑定到具体的 DOM 元素上，从而使父组件能够通过 ref 访问到这个 DOM 元素。

3. 基础用法

下面是一些基础的用法：

3.1. 类组件中使用 forwardRef

在类组件中使用 forwardRef 时，通常需要将 ref 绑定到类组件的实例上，或者直接绑定到类组件内部的 DOM 元素上。

jsx 复制代码 
// 子组件：Button.jsx
import React, { forwardRef } from 'react';

const Button = forwardRef((props, ref) => {
  return (
    <button ref={ref} className="btn" {...props}>
      {props.children}
    </button>
  );
});

export default Button;

// 父组件：App.jsx
import React, { useRef } from 'react';
import Button from './Button';

function App() {
  const buttonRef = useRef(null);

  const handleClick = () => {
    // 通过 ref 访问 Button 的 DOM 节点
    buttonRef.current.focus();
  };

  return (
    <div>
      <Button ref={buttonRef}>Click me</Button>
      <button onClick={handleClick}>Focus the button</button>
    </div>
  );
}

在这个例子中，Button 组件通过 forwardRef 接收了父组件传递的 ref，并将其绑定到内部的 <button> 元素上。父组件可以通过 buttonRef.current 直接访问这个 DOM 节点，调用其方法（如 focus()）。

3.2. 函数组件中使用forwardRef

在函数组件中使用 forwardRef 的方式类似，但由于函数组件没有实例，ref 只能绑定到 DOM 元素上。

jsx 复制代码 
// 子组件：Input.jsx
import React, { forwardRef } from 'react';

const Input = forwardRef((props, ref) => {
  return (
    <div className="input-wrapper">
      <label>{props.label}</label>
      <input ref={ref} type="text" {...props} />
    </div>
  );
});

export default Input;

// 父组件：Form.jsx
import React, { useRef } from 'react';
import Input from './Input';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    // 通过 ref 访问 Input 的 DOM 节点
    console.log(inputRef.current.value);
    inputRef.current.focus();
  };

  return (
    <form onSubmit={handleSubmit}>
      <Input ref={inputRef} label="Name" />
      <button type="submit">Submit</button>
    </form>
  );
}

这里，Input 组件通过 forwardRef 将 ref 传递给内部的 <input> 元素，父组件可以直接操作这个 DOM 元素。

4. 与其他 React 特性结合

下面是一些进阶的使用方法：

4.1. forwardRef 与 useImperativeHandle

useImperativeHandle 可以与 forwardRef 配合使用，自定义暴露给父组件的实例值。这在你不想完全暴露子组件的 DOM 节点，而是提供一些特定方法时非常有用。

jsx 复制代码 
// 子组件：CustomInput.jsx
import React, { forwardRef, useRef, useImperativeHandle } from 'react';

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // 自定义暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    clear: () => {
      inputRef.current.value = '';
    },
    getValue: () => inputRef.current.value
  }));

  return (
    <div>
      <input ref={inputRef} type="text" {...props} />
    </div>
  );
});

export default CustomInput;

// 父组件：Parent.jsx
import React, { useRef } from 'react';
import CustomInput from './CustomInput';

function Parent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    // 只能访问 CustomInput 暴露的方法
    inputRef.current.focus();
    console.log(inputRef.current.getValue());
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleClick}>操作 Input</button>
    </div>
  );
}

在这个例子中，CustomInput 组件通过 useImperativeHandle 自定义了暴露给父组件的方法，父组件只能访问这些特定方法，而不是完整的 DOM 节点，从而保持了组件的封装性。

4.2. 在高阶组件中的应用

在高阶组件（HOC）中，使用 forwardRef 可以确保 ref 正确地传递给被包裹的组件。

jsx 复制代码 
// 高阶组件：withLogging.jsx
import React, { forwardRef } from 'react';

function withLogging(WrappedComponent) {
  const LoggingComponent = forwardRef((props, ref) => {
    return <WrappedComponent ref={ref} {...props} />;
  });

  LoggingComponent.displayName = `WithLogging(${WrappedComponent.displayName || WrappedComponent.name})`;
  return LoggingComponent;
}

// 使用高阶组件
const EnhancedButton = withLogging(Button);

// 在父组件中使用
function App() {
  const buttonRef = useRef(null);

  return <EnhancedButton ref={buttonRef}>Click me</EnhancedButton>;
}

通过在高阶组件中使用 forwardRef，我们确保了 ref 能够正确地传递给原始组件，而不是被高阶组件拦截。

5. 常见使用场景

下面是一些常见的使用场景：

5.1. 封装可复用组件

当你封装一些通用组件（如按钮、输入框、模态框等）时，可能需要允许父组件直接操作组件内部的 DOM 元素。这时使用 forwardRef 可以提供更好的灵活性。

jsx 复制代码 
// 封装一个可复用的 Modal 组件
const Modal = forwardRef((props, ref) => {
  const modalRef = useRef(null);

  useImperativeHandle(ref, () => ({
    open: () => {
      modalRef.current.style.display = 'block';
    },
    close: () => {
      modalRef.current.style.display = 'none';
    }
  }));

  return (
    <div ref={modalRef} className="modal">
      <div className="modal-content">{props.children}</div>
    </div>
  );
});

// 父组件可以直接控制 Modal 的打开和关闭
function Parent() {
  const modalRef = useRef(null);

  return (
    <div>
      <Modal ref={modalRef}>
        <p>Modal content</p>
      </Modal>
      <button onClick={() => modalRef.current.open()}>Open Modal</button>
    </div>
  );
}

5.2. 与第三方库集成

在与一些需要直接操作 DOM 的第三方库（如 Chart.js、D3.js 等）集成时，forwardRef 可以帮助你将 ref 传递给相应的 DOM 元素。

jsx 复制代码 
// 使用 Chart.js 的组件
const ChartComponent = forwardRef((props, ref) => {
  const chartRef = useRef(null);
  let chartInstance = null;

  useEffect(() => {
    if (chartRef.current) {
      // 初始化 Chart
      chartInstance = new Chart(chartRef.current.getContext('2d'), {
        type: 'bar',
        data: props.data,
        options: props.options
      });
    }

    return () => {
      // 清理资源
      if (chartInstance) {
        chartInstance.destroy();
      }
    };
  }, [props.data, props.options]);

  return <canvas ref={ref || chartRef} />;
});

// 父组件可以直接访问 canvas 元素
function Dashboard() {
  const chartRef = useRef(null);

  const updateChart = () => {
    // 直接操作 Chart 实例
    chartRef.current.update();
  };

  return (
    <div>
      <ChartComponent ref={chartRef} data={chartData} options={chartOptions} />
      <button onClick={updateChart}>Update Chart</button>
    </div>
  );
}

5.3. 创建跨平台组件

在开发跨平台组件（如同时支持 Web 和 Native 的 React Native Web 组件）时，forwardRef 可以确保 ref 能够正确地传递到底层的原生组件。

jsx 复制代码 
// 跨平台的 TextInput 组件
import { Platform } from'react-native';
import { TextInput as WebTextInput } from'react-native-web';

const TextInput = forwardRef((props, ref) => {
  if (Platform.OS === 'web') {
    return <WebTextInput ref={ref} {...props} />;
  } else {
    return <NativeTextInput ref={ref} {...props} />;
  }
});

6. 注意事项

  1. 不要过度使用 ref：ref 打破了组件的封装性，应该谨慎使用。大多数情况下，应该优先通过 props 和状态管理来实现组件间的通信。

  2. 函数组件不能使用实例 ref ：函数组件没有实例，因此 ref 只能绑定到 DOM 元素或使用 useImperativeHandle 自定义暴露的方法。

  3. forwardRef 与 Context 结合时的优先级 ：当一个组件同时使用 forwardRef 和 useContext 时，ref 会优先传递给 forwardRef，而不是被 Context 消费。

  4. 性能考虑：频繁通过 ref 操作 DOM 可能会影响性能，尽量使用 React 的声明式方式更新 UI。

7. 总结

forwardRef 是 React 中一个强大但需要谨慎使用的特性，它允许你将 ref 从父组件传递到子组件的 DOM 元素或实例，为组件间的交互提供了更大的灵活性。主要应用场景包括封装可复用组件、与第三方库集成以及创建跨平台组件等。

使用 forwardRef 时，要注意保持组件的封装性，避免过度暴露内部实现细节。可以通过 useImperativeHandle 自定义暴露给父组件的方法，从而在提供灵活性的同时保持良好的组件设计。

本次分享就到这儿啦，我是鹏多多，如果看了觉得有帮助的，欢迎 点赞 关注 评论，在此谢过道友；

往期文章

相关推荐
吃饺子不吃馅3 小时前
AntV X6 核心插件帮你飞速创建画布
前端·css·svg
Ares-Wang3 小时前
Vue2 》》Vue3》》 Render函数 h
javascript
葡萄城技术团队3 小时前
SpreadJS 纯前端表格控件：破解中国式复杂报表技术文档
前端
Humbunklung3 小时前
C# 压缩解压文件的常用方法
前端·c#·压缩解压
通往曙光的路上3 小时前
时隔一天第二阶段他来了 html！！！！！！！！！！！
前端·html
爱吃甜品的糯米团子3 小时前
CSS图片背景属性
前端·css
雮尘4 小时前
一文读懂Android Fragment栈管理
android·前端
Aoda4 小时前
浏览器字体设置引发的Bug：从一次调查到前端字体策略的深度思考
前端·css
朝与暮4 小时前
《javascript进阶-类（class）：构造函数的语法糖》
前端·javascript
热门推荐
01Multisim使用教程详尽版--(2025最新版)02UV 工具安装与国内镜像源配置指南03GitHub 镜像站点04Spec-Kit 使用指南0546个Nano-banana 精选提示词，持续更新中06UV安装并设置国内源07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）082025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）09VsCode远程Copilot无法使用Claude Agent问题10Linux下V2Ray安装配置指南