Reactjs 如何使用typescript扩展react引导组件？

我正在使用

react-bootstrap@1.0.0-beta.14

我正在尝试使用react bootstraps

按钮

创建一个自定义的

按钮

组件，添加另一个道具，

isLoading

。 由于react引导类型的定义方式，我最终导入了一些助手类型并复制了react引导类型的一部分：

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

从“React”导入React
从“react bootstrap”导入{按钮作为Btn，按钮操作}
从“react bootstrap/helpers”导入{BsPrefixProps，ReplaceProps}
界面道具{
isLoading？：布尔值
}
类型BtnProps=ReplaceProps<
作为，
BsPrefixProps和按钮按钮
>
导出常量按钮：React.FC=（{isLoading，disabled，…props}）=>{
返回
}

这几乎奏效了。我得到的错误告诉我

ref

道具类型错误：

属性“ref”的类型不兼容

Type'（实例：HTMLButtonElement | null）=>void'不可分配给Type'（实例：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} />
}

从“React”导入React
从“react bootstrap”导入{按钮作为Btn，按钮操作}
界面道具{
isLoading？：布尔值
}
导出常量按钮：React.FC=（{isLoading，…props}）=>{
返回
}

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

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

export const按钮：React.FC=
（{isLoading，disabled，…props}）=>

---

这并不理想，因为理论上，

Btn

可以是不同的本机元素（不一定是

按钮），但对于我的用例来说已经足够好了。
您可以看到更好的方法是在下面的代码段中

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

从“React”导入React；
从“react bootstrap”导入{Button，ButtonProps}
接口PropType扩展按钮操作{
buttonText：字符串；
提交：布尔值；
}
export const SubmitButton:React.FC=（props:PropType）=>{
让{isSubmitting，buttonText，…remainingProps}=props；
返回(
{props.buttonText}
)
}
这并不是真的，因为ButtonProps缺少了您想要传递给本机button元素的所有道具，比如className，onClick etcI在这个问题上苦苦挣扎了几个小时，却没有得到令人满意的结果。看起来你的方法是唯一有效的方法，谢谢分享。这不起作用的原因与这不起作用的原因相同。这就是我们扩展ButtonProps mate的原因。我在我的企业应用程序中使用它。