来自包的ButtonProps与包中的Button组件不兼容。

Question

我使用的反应带与类型记录和来自@types/reactstrap的类型。我试图在特殊情况下使用Button组件，因此我需要显式地引用ButtonProps类型。这是它的代码：

import React from 'react'
import {withFormState, FormState} from 'informed'
import {Button, ButtonProps} from 'reactstrap'

export const SubmitButton = withFormState<Button, {formState: FormState} & ButtonProps>(
  ({
    formState: {pristine, invalid},
    disabled = false, children,
    ...props
  }) =>
    <Button type="submit" color="success" 
            disabled={pristine || invalid || disabled}
            {...props}>
      {children}
    </Button>
)

因此，基本上我只是将来自包的ButtonProps与来自另一个包的FormState组合在一起，但最终props变量应该只有与ButtonProps类型匹配的道具(因为formState是从ButtonProps类型中解构的)。

然而，TS说ButtonProps与我传递给组件的道具不匹配，也就是说ref属性类型是不兼容的。在这种情况下，我不和裁判打交道，所以我不太可能把他们搞砸。最有可能的是，我只是不明白在这种情况下如何正确定义类型。

下面是对我使用的类型的引用：

• 类型
• Button

Answer 1

我认为这是@types/reactstrap类型声明中的一个错误。注意，同样的错误发生在以下简单的测试用例中：

function test(props: ButtonProps) {
    return <Button {...props}/>;
}

ButtonProps包括React.HTMLProps<HTMLButtonElement>，它包含一个Ref<HTMLButtonElement>类型的ref支柱，但是Button不能真正接受这样的支持，因为React将拦截在JSX元素上指定的ref支柱，并将其与Button组件相关联，而不是它中可能存在的任何HTMLButtonElement。ButtonProps可能应该改为使用React.AllHTMLAttributes<HTMLButtonElement>而不是React.HTMLProps<HTMLButtonElement>。请针对DefinitelyTyped提交一个问题。

作为解决办法，您可以在销毁过程中删除伪造的ref支柱：

export const SubmitButton = withFormState<Button, {formState: FormState} & ButtonProps>(
  ({
    formState: {pristine, invalid},
    disabled = false, children,
    ref,  // <---
    ...props
  }) => {
    return <Button type="submit" color="success" 
            disabled={pristine || invalid || disabled}
            {...props}>
      {children}
    </Button>
  }
)