React Typescript-添加自定义属性

Question

React Typescript允许添加自定义data- *属性。但是是否可以添加自定义属性，例如'name'|| “测试”行为。？

<span name="I'm causing a type error" data-test="I'm Working"/>

我加粗了。

类型错误：类型'{儿童：元素；名称：字符串；数据测试：字符串；}”不能分配给“ DetailedHTMLProps，HTMLSpanElement>”类型。 属性“名称”在类型 “ DetailedHTMLProps，HTMLSpanElement>” 上不存在。TS232

"react": "^16.7.0",
"typescript": "^3.2.4",

Answer 1

还有另一种方法......跳过静态检查（打字稿不做动态）

{ 
  const allowedProps = {test: "not-data-attribute"}
  <span {...allowedProps}/>
}

Answer 2

在反应16+中有可能，请参阅

探针是打字稿不知道的（还）

但您仍然可以添加@ts忽略以进行类型检查

{ //@ts-ignore
  <span name="I'm causing a type error" data-test="I'm Working"/>
}

Answer 3

简单添加自定义属性以 开头data-，在某些情况下您可以从aria-

<div data-attr={3} data-nothing="super">hover</div>

似乎打字稿知道带有这些前缀的自定义属性，请检查此链接