Question

我正在使用带有Typescript的Reactstrap并从@types/reactstrap中键入内容。我正在尝试在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变量应该只具有与ButtonProps类型匹配的道具（因为formState已从其变形）。

但是，TS指出ButtonProps与我传递给组件的道具不匹配，即ref属性类型不兼容。在这种情况下，我不使用裁判，因此我不太可能弄乱他们。最有可能的是，我只是不了解在这种情况下如何正确定义类型。

以下是我使用的类型的引用：

Answer 1

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

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

ButtonProps包括React.HTMLProps<HTMLButtonElement>，其中包括类型为ref的{{1}}道具，但是Ref<HTMLButtonElement>无法真正接受这样的道具，因为React将拦截{在JSX元素上指定的{1}}属性，并将其与Button组件关联，而不是其中可能存在的任何ref。 Button应该更改为使用HTMLButtonElement而不是ButtonProps。请file an issue against DefinitelyTyped。

作为解决方法，您可以在销毁过程中删除伪造的React.AllHTMLAttributes<HTMLButtonElement>道具：

React.HTMLProps<HTMLButtonElement>

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

1 个答案: