React组件使用HTMLAttributes<HTMLButtonElement>时disabled属性类型报错，如何修正？

你遇到的问题是因为用错了属性类型——HTMLAttributes<HTMLButtonElement>只包含所有HTML元素通用的属性，而disabled是button标签特有的属性，得用专门的ButtonHTMLAttributes类型来覆盖这些专属属性。

修正后的组件类型定义 #

直接把HTMLAttributes替换成ButtonHTMLAttributes就行，代码如下：

import { ButtonHTMLAttributes } from 'react';

function ConfirmableButton(props: { onConfirm: () => void } & ButtonHTMLAttributes<HTMLButtonElement>) {
  // 你的组件实现代码
  return (
    <button {...props} onClick={() => {
      // 这里可以添加确认逻辑，比如弹窗确认后执行onConfirm
      props.onConfirm();
    }} />
  );
}

这样修改后，disabled、type、form这些button专属属性都能被TypeScript正确识别，你原来的使用方式<ConfirmableButton disabled={disabledRows.includes(id)} />就不会再报错了。

额外说明 #

• HTMLAttributes是所有HTML元素共享的属性集合，比如className、style、title这类通用属性
• ButtonHTMLAttributes继承了HTMLAttributes的所有属性，同时额外包含button元素独有的属性
• 如果是其他类型的元素组件，要对应使用对应的Attributes类型，比如输入框用InputHTMLAttributes，div用DivHTMLAttributes

内容的提问来源于stack exchange，提问作者David Min