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

问题描述 投票:0回答:2

我正在使用[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中吗?

reactjs typescript react-bootstrap
2个回答
0
投票

我只是想知道以下简化是否足够?

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} />
}

0
投票

所以,我决定通过一种解决方法解决此问题:

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

这不理想,因为从理论上讲,Btn可以是不同的本机元素(并不总是button,但是对于我的用例来说已经足够了。

© www.soinside.com 2019 - 2024. All rights reserved.