为CSS自定义属性扩展React类型

Question

我正在将我的React项目转换为TypeScript，但不知道如何扩展React。HTMLPorps接受自定义CSS数据属性。

我在项目中使用的一个常见模式是:

const MyComponent = ( ) => <div mycustomattr="true"/>;

我试着创建一个这样的界面:

interface ExtendedDiv extends HTMLProps<HTMLDivElement> {
mycutomattr: "true" | "false";
};

但是，我不确定如何将此应用于JSXdiv元素。

Answer 1

我可以看到两种方法:

1. 最简单的方法是重命名atribut -custom=>data-custom。但是这将导致:

<div data-custom="true" />

2. 扩展react接口HTMLAttributes，但它将允许此属性用于所有元素

interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// extends React's HTMLAttributes
custom?: boolean;
}