React Typescript - 添加自定义属性

Question

React Typescript 允许添加自定义 data-* 属性。 但是是否可以添加类似 'name' || 'test' 等自定义属性呢？

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

我添加了粗体。

类型错误：无法将类型“{ children: Element; name: string; data-test: string; }”分配给类型“DetailedHTMLProps”。 属性“name”在类型“DetailedHTMLProps”中不存在。 TS232

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

- Yaniv Peretz

Answer 1

还有另一种方式...跳过静态检查（TypeScript不执行动态操作）

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

- Yaniv Peretz

Answer 2

在 React 16+ 中是可能的，参见

问题在于 TypeScript 还不知道它（还没有支持）

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

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

- Juraj Kocan

---

是的，这正是我所想的。 - Yaniv Peretz

我正在使用React 17和TypeScript，但我的项目仍无法编译，因为该属性在元素上不存在（例如锚标签）。那篇博客文章让它听起来应该可以正常工作，我是不是漏了什么？ - Yoshi Askharoun

Answer 3

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

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

看起来TypeScript知道带有这些前缀的自定义属性，请查看此链接

- lastStranger

Answer 4

在您的项目中创建任何扩展名为.d.ts的文件，然后在JSX命名空间中扩展按钮接口。我将其用于使用React创建amp页面。

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

    interface IntrinsicElements {
        button: ExtendedButton;
    }
}

- svrakata