React封装组件无法添加ref，需配置何种TypeScript类型消除报错？

要让你的Wrapper组件支持ref属性，需要改用forwardRef创建组件，并调整对应的TypeScript类型，具体修改如下：

import { forwardRef, HTMLAttributes } from "react";

const Wrapper = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ children, className, ...props }, ref) => (
    <div 
      ref={ref} 
      className={`h-[90vh] ${className || ""}`} 
      {...props}
    >
      {children}
    </div>
  )
);

export default Wrapper;

关键说明： #

• 原代码使用的FC（FunctionComponent）类型不包含ref属性定义，因此无法直接接收ref参数，必须用forwardRef创建支持ref传递的组件。
• forwardRef的两个泛型参数：
  • 第一个参数HTMLDivElement指定了ref绑定的内部DOM元素类型（对应组件内的div）；
  • 第二个参数HTMLAttributes<HTMLDivElement>保留了原组件的props类型，确保可以正常传递div的原生属性。
• 组件函数会额外接收ref参数，需要将其绑定到内部的div元素上，这样外部传入的ref就能指向这个div。

修改后，你就可以正常给Wrapper组件添加ref属性，TypeScript不会再触发报错。

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