TypeScript如何在JSX中处理`data-*`属性？

qojgxg4l 于 2023-05-19 发布在 TypeScript

关注(0)|答案(1)|浏览(226)

想想这个：

import type { JSX } from 'react';

const MyComponent = (): JSX.Element => (
  <div data-attr="bar">Foo</div>
);

这并没有给予任何预期的TypeScript错误，但是，我找不到data-*自定义属性的类型，类似于

interface *** {
  // other attributes...
  `data-${string}`: string
}

有谁能告诉我在d.ts文件中定义了这个吗？

1条答案

它是JSX的Typescript规范的一部分，根据文档：
注意：如果一个属性名不是一个有效的JS标识符（比如data-* 属性），如果在元素attributes类型中找不到它，它不会被认为是一个错误。
它还扩展到任何内部带有破折号-的属性，例如这是Typescript的有效JSX：

<div a-custom-attribute="hello"></div>