React中如何传递所有Props？解决类型匹配报错问题

问题根源在于你定义的组件Props类型没有覆盖原生HTML按钮的所有属性，像onClick、onMouseDown这类事件回调都不在当前的类型范围内，所以传入这些属性时TypeScript会判定类型不兼容。

正确实现方式 #

直接继承React提供的原生按钮属性类型，让组件自动接收所有按钮原生属性，还能按需扩展自定义属性：

1. 定义正确的Props类型
   使用React.ButtonHTMLAttributes<HTMLButtonElement>，这个类型已经包含了按钮的所有原生属性（包括children、onClick、onMouseDown等），无需手动逐个定义。

2. 组件实现示例

import React from 'react';

// 继承原生按钮属性，可按需扩展自定义属性
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

const Button = ({ className, children, ...props }: ButtonProps) => {
  // 合并自定义Tailwind样式和传入的className
  const btnClasses = `px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors ${className || ''}`;
  
  return (
    <button className={btnClasses} {...props}>
      {children}
    </button>
  );
};

export default Button;

扩展自定义属性（可选） #

如果需要给按钮添加自定义属性（比如主题变体），可以通过交叉类型扩展：

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: 'primary' | 'secondary' | 'danger';
};

// 组件内根据variant切换样式
const Button = ({ className, variant = 'primary', children, ...props }: ButtonProps) => {
  const baseClasses = 'px-4 py-2 rounded-lg transition-colors';
  const variantClasses = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    danger: 'bg-red-500 text-white hover:bg-red-600'
  }[variant];
  
  const btnClasses = `${baseClasses} ${variantClasses} ${className || ''}`;
  
  return (
    <button className={btnClasses} {...props}>
      {children}
    </button>
  );
};

使用组件 #

现在传入任何原生按钮属性都不会有类型错误了：

<Button 
  onClick={() => console.log('按钮被点击')}
  onMouseDown={() => console.log('鼠标按下')}
  disabled={false}
>
  确认操作
</Button>

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