如何使用 typescript 擴展 react-bootstrap 組件？

Question

我正在使用react-bootstrap@1.0.0-beta.14並且我正在嘗試使用 react-bootstraps Button創建自定義Button組件，添加另一個道具isLoading 。 由於 react-bootstrap 類型的定義方式，我最終導入了一些 helpers 類型並復制了一部分 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} />
}

這幾乎有效。 我得到的錯誤是告訴我ref道具類型是錯誤的：

屬性“ref”的類型不兼容。

...

類型 '(instance: HTMLButtonElement | null) => void' 不可分配給類型 '(instance: Button> | null) => void'。

我剝離了大部分錯誤消息以獲取相關位。 我需要將組件包裝在 forwardRef 中才能完成這項工作嗎？

Answer 1

你可以看到更好的做法是在下面的代碼段。

import React from 'react';
import { Button, ButtonProps } from 'react-bootstrap'

interface PropType extends ButtonProps {
    buttonText: string;
    isSubmitting: boolean;
}

export const SubmitButton: React.FC<PropType> = (props: PropType) => {
let { isSubmitting, buttonText, ...remainingProps } = props;
    return (
        <Button  variant="primary" type="submit" disabled={props.isSubmitting} style={{margin: 10}} {...remainingProps}>
            {props.buttonText}
        </Button>
    )
}

Answer 2

我只是想知道以下簡化是否還不夠？

import React from 'react'
import { Button as Btn, ButtonProps } from 'react-bootstrap'

interface Props {
  isLoading?: boolean
}

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

Answer 3

所以，我決定用一種解決方法來解決這個問題：

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

這並不理想，因為理論上， Btn可以是一個不同的原生元素（並不總是一個button ），但它對我的用例來說已經足夠了。

Answer 4

我知道不久前有人回答了這個問題，但我遇到了類似的問題，並且很高興我剛剛找到了“正確”的解決方案。 詳細信息在這里： https://shaderfun.com/2021/10/04/extending-boot-strap-in-type-script/

這個例子展示了我是如何做到的：

//imports
import React from "react";
import { Button, ButtonProps } from "react-bootstrap";
import { BsPrefixProps, ReplaceProps } from "react-bootstrap/helpers"
import { BsInfo } from 'react-icons/bs'

//handy type defintion to wrap up the replace+bsprefix bits of bootstrap
type BootstrapComponentProps<As extends React.ElementType, P> = ReplaceProps<As, BsPrefixProps<As> & P>

//our extended button properties
type NewButtonProps = {
    //any new properties we want to add go here
} & ButtonProps

//boot-strap-ified full button properties with all the bells and whistles
type MyInfoButtonProperties<As extends React.ElementType = 'button'> =
    BootstrapComponentProps<As, NewButtonProps>

//our button!
export function MyInfoButton<As extends React.ElementType = 'button'>(props: MyInfoButtonProperties<As>) {
    return <Button {...props} 
        variant={props.variant || "light"}>
        <BsInfo/>
    </Button>
}

我的目標是創建一個默認為“light”並包含來自 react-icons 的 BsInfo 圖標的按鈕。