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

Posted 2023-03-23

【中文标题】包中的 ButtonProps 与包中的 Button 组件不兼容

【英文标题】：ButtonProps from the package is incompatible with Button component from the package

【发布时间】：2019-03-14 16:28:10

【问题描述】：

我正在使用带有 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 属性类型不兼容。在这种情况下，我不使用 refs，所以我不太可能把它们搞砸。很可能，我只是不明白在这种情况下如何正确定义类型。

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

Informed's withFormState type Reactstrap's ButtonProps and Button

【参考方案1】：

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

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

ButtonProps 包含 React.htmlProps<HTMLButtonElement>，其中包含一个 ref 类型为 Ref<HTMLButtonElement> 的 prop，但 Button 不能真正接受这样的 prop，因为 React 会拦截 JSX 元素上指定的 ref prop 并关联它带有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>
  
)

【讨论】：

谢谢！我在解构中删除了它，现在它“很好”。我会提出问题