React函数组件无法使用ref：如何在父组件获取子组件宽度？

你的代码报错是因为普通函数组件默认不支持接收ref属性，React的FC类型定义里没有包含ref字段，所以TypeScript会提示该属性不存在于子组件的props类型中。要让自定义子组件能接收ref，需要用forwardRef包装子组件，结合useImperativeHandle还能更灵活地暴露子组件内部的方法或DOM元素。

以下是两种可行的解决方案：

方案一：直接暴露子组件内部DOM元素 #

这种方式让父组件的ref直接指向子组件里的View元素，之后可直接通过ref获取宽度：

import { FC, PropsWithChildren, useRef, forwardRef, useEffect } from "react";

// 父组件
const MyParent: FC<PropsWithChildren> = () => {
  // 根据实际环境定义类型：Web用HTMLDivElement，React Native用View
  const myref = useRef<HTMLDivElement>(null);

  // 组件挂载后获取宽度
  useEffect(() => {
    if (myref.current) {
      // Web环境用offsetWidth，React Native用measure方法
      const width = myref.current.offsetWidth;
      console.log("子组件宽度:", width);
    }
  }, []);

  return <MyChild ref={myref} />;
};

// 用forwardRef包装子组件，使其能接收父组件传递的ref
const MyChild = forwardRef<HTMLDivElement, PropsWithChildren>((props, ref) => {
  // 将父组件的ref绑定到内部View上
  return <div ref={ref} />;
});

方案二：通过useImperativeHandle暴露获取宽度的方法 #

这种方式封装子组件逻辑，只暴露需要的方法给父组件，更符合组件封装原则：

import { FC, PropsWithChildren, useRef, forwardRef, useImperativeHandle, useEffect } from "react";

// 定义父组件可调用的子组件方法类型
type ChildHandle = {
  getWidth: () => number | undefined;
};

// 父组件
const MyParent: FC<PropsWithChildren> = () => {
  const myref = useRef<ChildHandle>(null);

  useEffect(() => {
    if (myref.current) {
      const width = myref.current.getWidth();
      console.log("子组件宽度:", width);
    }
  }, []);

  return <MyChild ref={myref} />;
};

// 子组件用forwardRef+useImperativeHandle暴露指定方法
const MyChild = forwardRef<ChildHandle, PropsWithChildren>((props, ref) => {
  const viewRef = useRef<HTMLDivElement>(null);

  // 自定义父组件通过ref能访问的内容
  useImperativeHandle(ref, () => ({
    getWidth: () => {
      return viewRef.current?.offsetWidth;
    },
  }));

  return <div ref={viewRef} />;
});

关键说明 #

• forwardRef：专门为函数组件传递ref的API，会将父组件的ref作为第二个参数传入子组件。
• useImperativeHandle：自定义父组件通过ref可访问的内容，避免直接暴露整个DOM元素，提升组件封装性。
• TypeScript类型：需给ref指定正确的类型（如DOM元素类型或自定义方法类型），避免类型报错。

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