我正在使用[email protected]
,并且尝试使用react-bootstraps Button
创建一个自定义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} />
}
此几乎有效。我得到的错误是告诉我ref
道具类型错误:
属性'ref'的类型不兼容。
...
类型'(instance:HTMLButtonElement | null)=> void'不能分配给类型'(instance:Button> | null)=> void'。
我剥离了大部分错误消息以获取相关位。为此,我需要将组件包装在forwardRef中吗?
我只是想知道以下简化是否足够?
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} />
}
所以,我决定通过一种解决方法解决此问题:
export const Button: React.FC<Props & React.ButtonHTMLAttributes<HTMLButtonElement>> =
({ isLoading, disabled, ...props }) =>
<Btn disabled={isLoading || props.disabled} {...props} />
这不理想,因为从理论上讲,Btn
可以是不同的本机元素(并不总是button
,但是对于我的用例来说已经足够了。