按钮上不存在属性“类型”

【问题标题】：Property 'type' does not exist on button按钮上不存在属性“类型”
【发布时间】：2020-08-06 00:11:05
【问题描述】：

我有这个按钮组件：

export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
    small?: boolean;
}

class Button extends React.Component<ButtonProps> { ... }

但是当我尝试这样做时：

<Button type="submit"></Button>

我收到此错误：

类型'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'

为什么？ type 属性不是React.HTMLAttributes<HTMLButtonElement> 的一部分吗？设置此属性的正确/推荐方法是什么？

【问题讨论】：

标签： reactjs typescript definitelytyped

【解决方案1】：

export interface ButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
  small?: boolean
}

class ButtonZ extends React.Component<ButtonProps> {
  render() {
    return <></>
  }
}

如果您使用 VSCode 作为 IDE，将鼠标悬停在 HTML 组件上并检查工具提示是查看类型和道具的好方法。

【讨论】：

谢谢 :) 接口扩展React.DetailedHTMLProps 真的有必要吗，还是React.ButtonHTMLAttributes<HTMLButtonElement> 就足够了？