包中的 ButtonProps 与包中的 Button 组件不兼容

Question

我正在使用 Reactstrap 和来自 @types/reactstrap 的 Typescript 和打字。我正在尝试在 HOC 中使用 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 变量应该只有与 [=13= 匹配的道具] 类型（因为 formState 从它解构）。

然而，TS 说 ButtonProps 与我传递给组件的道具不匹配，即 ref 属性类型不兼容。在这种情况下我不使用 refs，所以我不太可能把它们搞砸了。很可能，我只是不明白在这种情况下如何正确定义类型。

以下是我使用的打字参考：

Answer 1

我认为这是 @types/reactstrap 类型声明中的错误。请注意，在以下更简单的测试用例中会出现相同的错误：

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

ButtonProps 包含 React.HTMLProps<HTMLButtonElement>，其中包含类型 Ref<HTMLButtonElement> 的 ref prop，但是 Button 不能真正接受这样的 prop，因为 React 会拦截在 JSX 元素上指定的 ref 道具并将其与 Button 组件相关联，而不是其中可能存在的任何 HTMLButtonElement。 ButtonProps 应该改为使用 React.AllHTMLAttributes<HTMLButtonElement> 而不是 React.HTMLProps<HTMLButtonElement>。请file an issue against 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>
  }
)

包中的 ButtonProps 与包中的 Button 组件不兼容

ButtonProps from the package is incompatible with Button component from the package

typescript

reactjs

reactstrap