在 Typescript 中使用 `inert` 属性时出错

Question

我使用 Typescript 模板创建了一个普通的 create-react-app。
我添加了这一行：

<dialog inert></dialog>

应用程序甚至无法运行，因为打字稿抛出错误：

src/App.tsx 中出现错误：9:15 TS2322：类型 '{ 孩子：从不 []；惰性：真实； }' 不可分配给类型“DetailedHTMLProps”。 类型“DetailedHTMLProps”上不存在属性“inert”。

我想修复它而不是忽略它，但即使忽略似乎也不起作用。

// @ts-ignore
return (<dialog inert></dialog>);

Answer 1

该类型尚未添加到 React TypeScript 定义中。工作中有一个 PR 草案here，所以如果该 get 被合并应该可以工作。

Answer 2

将其添加到您的全局类型定义中：

declare namespace React {
  interface HTMLAttributes<T> {
    inert?: ''
  }
}

不要将其用作布尔值，而是用作空字符串：

<dialog inert="" />

或者：

<dialog inert={shouldBeInert ? '' : undefined} />