React Typescript - 添加自定义属性答案

【问题标题】：React Typescript - Adding custom attributeReact Typescript - 添加自定义属性
【发布时间】：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",

【问题讨论】：

标签： reactjs typescript custom-attributes

【解决方案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

【讨论】：