使用TypeScript扩展react-bootstrap Button组件时ref类型错误，如何解决？

是的，你必须使用React.forwardRef来解决这个ref类型不兼容的问题，这也是处理自定义组件ref传递的标准方案。

问题根源 #

你定义的BtnProps类型继承了react-bootstrap Button的完整属性，其中包含了ref相关的类型定义。但React.FC（函数组件类型）默认不支持接收ref属性——当外部尝试给你的自定义Button传递ref时，TypeScript会检测到类型不匹配：外部期望ref指向react-bootstrap Button对应的DOM元素（或自定义元素），但你的组件并没有正确接收并传递这个ref。

修改后的完整代码 #

import React, { forwardRef } from 'react'
import { Button as Btn, ButtonProps } from 'react-bootstrap'
import { BsPrefixProps, ReplaceProps } from 'react-bootstrap/helpers'

interface Props { isLoading?: boolean }
type BtnProps<As extends React.ElementType = 'button'> = ReplaceProps<
  As, 
  BsPrefixProps<As> & ButtonProps
>

// 使用forwardRef包裹组件，处理ref传递和类型匹配
export const Button = forwardRef<
  // 自动匹配As对应的元素类型，默认是HTMLButtonElement
  As extends React.ElementType ? React.ElementRef<As> : never,
  BtnProps & Props
>(({ isLoading, disabled, ...props }, ref) => {
  // 将ref传递给内部的react-bootstrap Button组件
  return <Btn {...props} ref={ref} disabled={isLoading || disabled} />
})

// 设置displayName，方便React DevTools识别组件
Button.displayName = 'Button'

关键修改点说明 #

1. 引入forwardRef：forwardRef允许函数组件接收并传递ref到内部的DOM元素或子组件，解决了React.FC不支持ref的问题。
2. 类型泛型匹配：
   • 第一个泛型参数指定了ref的目标类型，用React.ElementRef<As>自动匹配BtnProps中As对应的元素类型（比如默认的button对应HTMLButtonElement）。
   • 第二个泛型参数保持你原来的BtnProps & Props，确保组件接收所有预期的属性。
3. 传递ref到内部组件：在渲染内部的Btn时，把forwardRef接收的ref参数传递给它，这样外部的ref就能正确指向react-bootstrap Button的实例/DOM元素。

验证效果 #

现在当你在外部使用自定义Button时，ref的类型会完全匹配react-bootstrap Button的ref类型：

import { useRef } from 'react'
import { Button } from './your-custom-button'

const MyComponent = () => {
  const btnRef = useRef<HTMLButtonElement>(null)
  // 这里不会再出现类型错误
  return <Button ref={btnRef} isLoading={false}>Click Me</Button>
}

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