如何使用React forwardRef实现函数组件透传内部CustomComponent引用

ref是React的特殊属性，不会作为普通props传递给函数组件，直接在INTERFACE1中添加ref属性无法生效，必须通过forwardRef透传ref才能绑定到内部的CustomComponent上，具体实现步骤如下：

步骤1：修改INTERFACE1与FUNCTION1的实现 #

import React, { forwardRef } from 'react';

// 原接口不需要新增ref属性，ref由forwardRef单独处理
export interface INTERFACE1{
  name?: string;
  label?: string;
}

// 用forwardRef包裹组件
// 泛型第一个参数为ref指向的实例类型，第二个为props的类型
export const FUNCTION1 = forwardRef<React.ElementRef<typeof CustomComponent>, INTERFACE1>(
  ({ name, label }, ref) => {
    // 将拿到的ref直接绑定到内部的CustomComponent上
    return (
      <CustomComponent ref={ref} name={name} label={label} />
    );
  }
);

// 可选配置：设置组件displayName，方便React DevTools调试
FUNCTION1.displayName = 'FUNCTION1';

步骤2：调整FUNCTION2的调用代码 #

函数组件中优先使用useRef而非createRef，避免每次渲染重复创建ref实例：

import React, { useRef, useEffect } from 'react';
import { FUNCTION1 } from 'FUNCTION1';

interface INTERFACE2 {
  loading: boolean;
}

export default function FUNCTION2({ loading }: INTERFACE2) {
  // 若CustomComponent内部暴露的是textarea实例，该类型可以正常使用
  const areaRef = useRef<HTMLTextAreaElement>(null);

  // 测试访问实例，可根据实际需求操作ref
  useEffect(() => {
    if (areaRef.current) {
      console.log(areaRef.current.value);
    }
  }, []);

  return (
    <>
      <FUNCTION1
        name="NAME"
        label="LABEL"
        ref={areaRef}
      />
    </>
  );
}

注意事项 #

• 如果CustomComponent是你自行实现的函数组件，需要同样用forwardRef包裹处理ref透传，否则ref无法正确绑定到其内部的DOM元素或实例上
• 如果CustomComponent是类组件，不需要额外处理，默认支持接收ref
• 泛型中的实例类型要和CustomComponent实际暴露的类型保持一致，不确定类型时可先用unknown过渡再逐步校准

内容的提问来源于stack exchange，提问作者anthino12