React转TypeScript：扩展HTMLProps支持自定义CSS属性及JSX应用

首先纠正你接口里的拼写错误：mycutomattr应该是mycustomattr，拼写错误会导致类型无法正常生效。

下面给你两种实用的实现方式：

方式一：给自定义组件绑定扩展属性 #

如果只是特定组件需要这个自定义属性，可以直接给组件的props指定你定义的接口，再把props透传给div：

import React from 'react';

// 修正拼写后的扩展接口
interface ExtendedDivProps extends React.HTMLProps<HTMLDivElement> {
  mycustomattr: "true" | "false";
}

const MyComponent = (props: ExtendedDivProps) => {
  // 把所有props（包括自定义属性）传递给div
  return <div {...props} />;
};

// 使用示例
<MyComponent mycustomattr="true" className="some-class" />

方式二：全局扩展所有div的属性 #

如果想让项目中所有div都能直接使用这个自定义属性，需要扩展React的内置类型声明：

1. 在项目根目录或src文件夹下新建一个.d.ts文件（比如custom-react-types.d.ts）
2. 写入以下代码：

declare module 'react' {
  interface HTMLAttributes<T> {
    // 若不需要强制必填，可添加?设为可选属性
    mycustomattr?: "true" | "false";
  }
}

// 必须添加这行，让TypeScript识别这是一个模块
export {};

完成后，直接写<div mycustomattr="true" />就不会出现类型报错了。

内容的提问来源于stack exchange，提问作者Joseph Ghaida