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

Question

我正在使用 react-bootstrap@1.0.0-beta.14 并且我正在尝试使用react-bootstraps Button< 创建自定义 Button 组件，添加另一个 Prop ，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 prop 类型是错误的:

Types of property 'ref' are incompatible.

...

Type '(instance: HTMLButtonElement | null) => void' is not assignable to type '(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>
    )
}