我假设Visual Studio Code中的TypeScript引擎已经收到了一个更新,现在第一次抱怨我在HTML元素上预先存在的自定义 prop 无效。这是一个Babel/React/JSX项目,没有任何TypeScript。
<div custom="bar" />
- 注意:它们(技术上)是无效的,但我消耗它们,所以我知道我在做什么(这是故意的)。*
See it on CodePen!
参见
- How do I add attributes to existing HTML elements in TypeScript/JSX?(一年多前由我自己发布,不再工作)。
- JSX|类型检查
3条答案
按热度按时间x9ybnkn61#
React类型定义文件(默认情况下为
create-react-app
)包含所有标准HTML元素以及已知属性的列表。为了允许自定义HTML属性,你需要定义它的类型。通过扩展
HTMLAttributes
接口来实现:阅读更多关于TypeScript文档上的模块增强。
dldeef672#
注意:如果一个属性名不是一个有效的JS标识符(比如data-* 属性),如果在元素attributes类型中找不到它,它不会被认为是一个错误。
<div data-custom="bar" />
www.example. com https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
00jrzges3#
项目结构:
软件包版本:
tsconfig.json
:App.tsx
:正如您所看到的,
p
元素中有两个自定义HTML属性:_name
和_error
。现在,我们需要使用这两个自定义HTML属性扩展React
的HTMLAttributes
接口。选项一:
index.d.ts
:输出:
选项二:
输出: