如何使用打字稿扩展react-bootstrap组件？

Question

我正在使用react-bootstrap@1.0.0-beta.14并尝试Button使用react-bootstraps创建自定义组件Button，添加另一个道具，isLoading. 由于react-bootstrap类型的定义方式，我最终导入了一些帮助器类型并复制了react-bootstrap类型的一部分：

import React 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
>

export const Button: React.FC<BtnProps & Props> = ({ isLoading, disabled, ...props }) => {
  return <Btn {...props} disabled={isLoading || disabled} />
}

这几乎有效。我得到的错误告诉我refprop 类型是错误的：

属性“ref”的类型不兼容。

...

类型“(instance: HTMLButtonElement | null) => void”不可分配给类型“(instance: Button> | null) => void”。

我删除了大部分错误消息以获取相关位。我是否需要将组件包装在forwardRef 中才能完成这项工作？

Answer 1

因此，我决定通过一种解决方法来解决这个问题：

export const Button: React.FC<Props & React.ButtonHTMLAttributes<HTMLButtonElement>> = 
({ isLoading, disabled, ...props }) => 
<Btn disabled={isLoading || props.disabled} {...props} />

这并不理想，因为理论上，Btn可以是不同的本机元素（并不总是button），但它对于我的用例来说已经足够好了。