React中扩展HTML元素Props的四种方式是否可互换？

一、四种类型的差异与适用场景 #

你提到的ComponentPropsWithoutRef、ComponentPropsWithRef、ComponentProps、ButtonHTMLAttributes并非完全可互换，核心差异体现在是否包含ref属性，以及类型推导的精准性：

1. ButtonHTMLAttributes<HTMLButtonElement> #

• 直接对应<button>元素的专属HTML属性集合，包含button特有的属性（比如type的枚举值"button"|"submit"|"reset"）和通用HTML属性。
• 适用场景：普通组件（无需传递ref）、forwardRef组件都能使用——因为forwardRef的ref是通过单独参数传递，不包含在props中。

2. ComponentProps<'button'> #

• React内置工具类型，本质是ComponentPropsWithRef<'button'>的别名，会自动推导<button>的完整props类型，包含ref属性。
• 适用场景：forwardRef组件，明确表示组件支持接收外部传入的ref。

3. ComponentPropsWithRef<'button'> #

• 和ComponentProps<'button'>功能完全一致，显式包含ref属性，是forwardRef组件的标准类型选择，语义更清晰。

4. ComponentPropsWithoutRef<'button'> #

• 包含<button>的所有属性，但不包含ref，适合不需要接收ref的普通组件。如果用在forwardRef组件中，props类型不会包含ref，但不影响ref通过单独参数传递，只是类型定义不够精准。

互换性总结

• 普通组件（非forwardRef）：优先用ButtonHTMLAttributes或ComponentPropsWithoutRef，避免用户误传ref导致类型错误；不要用ComponentPropsWithRef或ComponentProps，否则props类型会包含ref，但普通组件无法接收，用户传ref时会报错。
• forwardRef组件：四种类型都能运行，但ComponentPropsWithRef/ComponentProps更符合语义，ButtonHTMLAttributes/ComponentPropsWithoutRef也能工作，只是ref不包含在props类型中。

二、HTMLAttributes与HTMLProps的问题解析 #

1. HTMLAttributes<HTMLButtonElement>无法正常工作 #

HTMLAttributes是通用HTML属性集合，不包含元素专属属性。比如<button>的type是严格枚举值，但HTMLAttributes里的type是string类型，会导致类型检查不严格，或和你手动设置的type枚举值冲突，因此不适合定义button组件的props。

2. HTMLProps的类型错误 #

HTMLProps是React早期的类型定义，现已被ComponentProps系列替代。它的问题在于将<button>的type定义为string，而原生<button>要求type必须是"button"|"submit"|"reset"|undefined。当你先解构submitButton再展开...props时，props里的type是string类型，传入原生<button>就会触发类型不匹配错误；如果先展开...props再设置type，你的枚举值type会覆盖props里的string类型，从而避开错误，但这只是临时 workaround，不推荐使用HTMLProps。

三、测试代码优化建议 #

你的代码本身可行，从类型精准度角度可以调整：

普通组件PlainButton #

用ComponentPropsWithoutRef<'button'>更贴合语义：

interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
  submitButton: boolean;
}

function PlainButton({ submitButton, ...props }: ButtonProps) {
  return (
    <button type={submitButton ? "submit" : "button"} {...props}>
      Test
    </button>
  );
}

forwardRef组件RefButton #

用ComponentPropsWithRef<'button'>更明确：

interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
  submitButton: boolean;
}

const RefButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ submitButton, ...props }, ref) => {
    return (
      <button ref={ref} type={submitButton ? "submit" : "button"} {...props}>
        Test
      </button>
    );
  },
);

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