如何扩展React类型并创建支持自定义与HTML属性的组件接口？

嘿，这个问题在React + TypeScript开发中太常见了，我来分享几种靠谱的实现方式，保证你的组件既能接收自定义Props，又能完美兼容React的HTML属性（比如className、style这些）👇

基础方案：针对固定根元素的组件 #

如果你的组件根元素是固定的（比如div），可以直接利用React内置的XxxHTMLAttributes类型，和自定义Props做交叉类型合并。

举个例子：

import React from 'react';

// 第一步：定义你的自定义Props接口
interface MyComponentCustomProps {
  customProp: string;
}

// 第二步：合并自定义Props和div的React专属HTML属性
type MyComponentProps = MyComponentCustomProps & React.DivHTMLAttributes<HTMLDivElement>;

// 第三步：在组件中解构使用
const MyComponent = ({ customProp, ...rest }: MyComponentProps) => {
  // 处理自定义属性逻辑
  console.log('自定义属性值:', customProp);
  // 把剩余的HTML属性透传给根元素
  return <div {...rest} />;
};

// 使用示例完全符合你的需求
<MyComponent customProp='value' style={{textAlign: 'center'}} className="my-custom-class" />

这里的React.DivHTMLAttributes<HTMLDivElement>已经包含了所有React适配的div属性，比如className、style、onClick、id等等，不用你手动一个个定义，省心又准确。

如果你的根元素是其他标签（比如button、input），只需要换成对应的类型就行：

• Button用React.ButtonHTMLAttributes<HTMLButtonElement>
• Input用React.InputHTMLAttributes<HTMLInputElement>

进阶方案：支持动态根元素的泛型组件 #

如果你的组件需要支持动态切换根元素（比如通过as属性渲染成button或者a标签），可以用泛型来实现更灵活的类型适配：

import React from 'react';

// 自定义Props，加入as属性指定根元素类型，默认是div
interface MyComponentCustomProps<T extends React.ElementType = 'div'> {
  customProp: string;
  as?: T;
}

// 合并自定义Props和目标元素的属性类型
type MyComponentProps<T extends React.ElementType> = MyComponentCustomProps<T> &
  React.ComponentPropsWithoutRef<T>;

// 泛型组件实现
const MyComponent = <T extends React.ElementType = 'div'>({
  customProp,
  as: Component = 'div', // 默认渲染div
  ...rest
}: MyComponentProps<T>) => {
  console.log('自定义属性值:', customProp);
  return <Component {...rest} />;
};

// 既可以默认渲染div
<MyComponent customProp='value' style={{textAlign: 'center'}} />
// 也可以指定渲染成button，自动获得button的属性提示
<MyComponent customProp='value' as="button" onClick={() => alert('点击了！')} />

处理Ref的情况 #

如果你的组件需要支持传递ref，只需要把ComponentPropsWithoutRef换成ComponentPropsWithRef，再配合React.forwardRef即可：

import React from 'react';

interface MyComponentCustomProps<T extends React.ElementType = 'div'> {
  customProp: string;
  as?: T;
}

// 换成ComponentPropsWithRef支持ref传递
type MyComponentProps<T extends React.ElementType> = MyComponentCustomProps<T> &
  React.ComponentPropsWithRef<T>;

// 使用forwardRef接收ref
const MyComponent = React.forwardRef(<T extends React.ElementType = 'div'>(
  { customProp, as: Component = 'div', ...rest }: MyComponentProps<T>,
  ref: React.Ref<React.ElementRef<T>>
) => {
  console.log('自定义属性值:', customProp);
  return <Component {...rest} ref={ref} />;
});

// 使用时可以传递ref
const divRef = React.useRef<HTMLDivElement>(null);
<MyComponent customProp='value' ref={divRef} style={{textAlign: 'center'}} />

核心思路总结 #

• 利用React内置的属性类型（XxxHTMLAttributes或ComponentPropsXxx），避免重复定义大量HTML属性
• 通过交叉类型（&）合并自定义Props和内置属性类型，实现两者的兼容
• 泛型方案可以让组件支持动态根元素，适配更多场景
• 根据是否需要传递ref，选择ComponentPropsWithRef或ComponentPropsWithoutRef

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