React TypeScript：实现点击变色的可复用按钮组件及问题解决

问题根源 #

你遇到的TS2322错误，是因为Button组件未明确声明支持的Props类型，TypeScript默认将组件Props推断为IntrinsicAttributes，该类型不包含children、id、className等原生按钮属性。

解决方案步骤 #

1. 定义合规的Props类型：让组件Props继承React.ButtonHTMLAttributes<HTMLButtonElement>，自动兼容所有原生button属性，无需手动声明常用属性。
2. 内部维护激活状态：用useState管理按钮的点击激活状态，切换状态时动态绑定样式实现变色效果。
3. 直接渲染原生button：避免嵌套额外button标签，确保最终仅渲染目标按钮。

完整Button.tsx代码 #

import { useState } from 'react';
import type { ButtonHTMLAttributes } from 'react';

// 继承原生按钮所有属性，无需手动声明children、onClick等
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

export const Button = ({ children, className = '', ...rest }: ButtonProps) => {
  const [isActive, setIsActive] = useState(false);

  // 合并自定义点击逻辑与组件内部状态切换
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    rest.onClick?.(e);
    setIsActive(prev => !prev);
  };

  // 合并基础样式、传入的className和激活状态样式
  const buttonClasses = `${className} ${isActive ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`;

  return (
    <button
      {...rest}
      className={buttonClasses}
      onClick={handleClick}
    >
      {children}
    </button>
  );
};

在Active.tsx中复用组件 #

此时传入children、id、className、onClick等属性不会再触发类型错误：

import { Button } from './Button';

export const Active = () => {
  const handleCustomClick = () => {
    console.log('状态按钮被点击');
  };

  return (
    <div>
      <Button
        id="statusButton"
        className="px-4 py-2 rounded border-0 cursor-pointer"
        onClick={handleCustomClick}
      >
        切换激活状态
      </Button>
    </div>
  );
};

关键说明 #

• 继承ButtonHTMLAttributes<HTMLButtonElement>后，组件自动支持所有原生button属性，省去手动声明的繁琐。
• handleClick先执行传入的自定义点击逻辑，再切换内部状态，保证业务逻辑与组件状态更新都能正常执行。
• 样式合并时保留传入的className优先级，方便自定义基础样式，再叠加激活状态样式实现变色效果。
• 直接渲染原生button，彻底避免嵌套导致的额外按钮问题。

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