reactjs - 如何让 TypeScript 引擎允许 JSX 中的自定义 HTML 属性？

Question

我假设 TypeScript 引擎在 Visual Studio Code 内收到了一个更新，现在第一次提示我在 HTML 元素上预先存在的自定义 Prop 无效。这是在没有任何 TypeScript 的 Babel/React/JSX 项目上。

<div custom="bar" />

注意:它们(技术上)无效，但我使用它们，所以我知道我在做什么(这是故意的)。

See it on CodePen!

另见

• How do I add attributes to existing HTML elements in TypeScript/JSX? (我自己一年多前发布的，现在已经失效了)。
• JSX | Type Checking

Answer 1

React 类型定义文件(默认情况下 - index.d.ts 当使用 create-react-app 时)包含所有标准 HTML 元素的列表，以及作为已知属性。

为了允许自定义 HTML 属性，您需要定义它的类型。通过扩展 HTMLAttributes 接口(interface)来做到这一点:

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    custom?: string;
  }
}