reactjs - React 不包含 HTMLButtonElement 类型的 'disabled' 属性

Question

我有一个组件定义如下:

function ConfirmableButton(props: { onConfirm: () => void; } & HTMLAttributes<HTMLButtonElement>)

但是当使用它时 <ConfirmableButton disabled={disabledRows.includes(id)} /> ，它给了我错误 Property 'disabled' does not exist on type 'IntrinsicAttributes & { onConfirm: () => void; } & HTMLAttributes<HTMLButtonElement>'

我应该使用什么来确保输入正确？

Answer 1

HTMLAttributes<T> 上的泛型类型只是真正为它的事件处理程序提供特定的元素类型。检查类型，T在HTMLAttributes仅在其扩展 DOMAttributes<T> 的地方被引用，它被传递给每个事件处理程序以键入事件对象的目标属性。

获取<button> -特定属性，您需要使用React的ButtonHTMLAttributes<HTMLButtonElement> (这是 React 用于按钮元素的类型):

interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
    autoFocus?: boolean | undefined;
    disabled?: boolean | undefined;
    form?: string | undefined;
    formAction?: string | undefined;
    formEncType?: string | undefined;
    formMethod?: string | undefined;
    formNoValidate?: boolean | undefined;
    formTarget?: string | undefined;
    name?: string | undefined;
    type?: 'submit' | 'reset' | 'button' | undefined;
    value?: string | ReadonlyArray<string> | number | undefined;
}