时间戳

首页 > 解决方案 > 如何使用 typescript 扩展 react-bootstrap 组件？

reactjs - 如何使用 typescript 扩展 react-bootstrap 组件？

问题描述

我正在使用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} />
}

这几乎可以工作。我得到的错误是告诉我ref道具类型是错误的：

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

...

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

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

标签： reactjstypescriptreact-bootstrap

解决方案

您可以在下面的代码中看到更好的方法。

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

推荐阅读