如何向React组件传递ref？遇类型错误求助

问题原因 #

你的自定义Button组件未配置为接收ref属性，React函数组件默认不支持直接传递ref，需通过React.forwardRef显式启用该功能；同时TypeScript会严格校验属性类型，因此抛出「属性'ref'不存在于类型」的错误。

解决方案 #

1. 修改Button组件，用forwardRef包裹

将Button组件改写为React.forwardRef包裹的形式，让它能接收并转发ref到内部原生按钮元素：

import React from 'react';

// 定义Button的props类型，包含所有需要的属性
interface ButtonProps {
  disabled?: boolean;
  className?: string;
  onClick?: () => void;
  type?: 'button' | 'submit' | 'reset';
  style?: React.CSSProperties;
  'data-name'?: string;
  children?: React.ReactNode;
  // 其他你需要的属性
}

// forwardRef泛型第一个参数是ref的目标类型（原生button元素），第二个是props类型
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  return (
    <button 
      ref={ref} 
      {...props}
    >
      {props.children}
    </button>
  );
});

export default Button;

2. 优化Select组件的ref类型

把Select组件中useRef的类型从any改为具体的HTMLButtonElement，提升类型安全性：

// 原代码
// const selectBtn = useRef<any>(null);
// 修改后
const selectBtn = useRef<HTMLButtonElement>(null);

原理说明 #

React.forwardRef会创建一个特殊组件，它能接收额外的ref参数，并将其传递给组件内部的DOM元素或其他组件。这样父组件（Select）给Button传递的ref会直接指向Button内部的原生<button>元素，你就能通过它获取元素的DOM属性（如offsetTop、offsetHeight）。

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