React Typescript - 添加自定义属性

Posted 2023-03-13

【中文标题】React Typescript - 添加自定义属性

【英文标题】：React Typescript - Adding custom attribute

【发布时间】：2019-07-19 01:37:51

【问题描述】：

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

<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",

【参考方案1】：

在 react 16+ 中是可能的，see

问题是打字稿不知道它（还）

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

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

【讨论】：

是的，我就是这么想的。谢谢。

我正在使用带有 TypeScript 的 React 17，但我的项目仍然无法编译，因为元素上不存在该属性（例如锚标记）。那篇博客文章听起来应该可以正常工作，我错过了什么吗？

【参考方案2】：

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

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

【参考方案3】：

在您的项目中创建任何扩展名为 .d.ts 的文件 并且只需在 JSX 命名空间中扩展按钮界面。 我正在使用它来使用 React 创建 amp 页面。

declare namespace JSX 
    interface ExtendedButton
        extends React.DetailedHTMLProps<
            React.ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement
        > 
        customAttribute?: string;
    

    interface IntrinsicElements 
        button: ExtendedButton;
    

【参考方案4】：

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

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

似乎打字稿知道带有这些前缀的自定义属性，检查这个link