React Typescript - 添加自定义属性

Question

React Typescript 允许添加自定义数据-* 属性。但是是否可以添加自定义属性，如 'name' || 'test' 行动。？

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

粗体是我加的。

type error: Type '{ children: Element; name: string; data-test: string; }' is not assignable to type 'DetailedHTMLProps, HTMLSpanElement>'. Property 'name' does not exist on type 'DetailedHTMLProps, HTMLSpanElement>'. TS232

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

Answer 1

在 React 16+ 中是可能的，see

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

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

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

Answer 2

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

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

Answer 3

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

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

    interface IntrinsicElements {
        button: ExtendedButton;
    }
}

Answer 4

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

开头

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

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

React Typescript - 添加自定义属性

React Typescript - Adding custom attribute

custom-attributes

typescript

reactjs