如何用TypeScript将Bootstrap按钮封装为React组件

前提准备 #

确保你的React+TypeScript项目已安装必要依赖：

npm install react typescript bootstrap @types/react @types/react-dom

组件实现代码 #

下面是封装好的可定制Bootstrap按钮组件，支持通过props传入宽高、颜色等参数动态调整样式，同时保留原生按钮和Bootstrap按钮的所有特性：

import React from 'react';
// 引入Bootstrap核心样式
import 'bootstrap/dist/css/bootstrap.min.css';

// 定义组件Props类型，继承原生按钮属性+自定义样式参数
interface CustomBootstrapButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  width?: string;
  height?: string;
  textColor?: string;
  bgColor?: string;
}

const CustomBootstrapButton: React.FC<CustomBootstrapButtonProps> = ({
  width,
  height,
  textColor,
  bgColor,
  className = '',
  style = {},
  ...restProps
}) => {
  // 合并自定义样式与传入的style，传入的style优先级更高
  const mergedStyles = {
    width: width ?? style.width,
    height: height ?? style.height,
    color: textColor ?? style.color,
    backgroundColor: bgColor ?? style.backgroundColor,
    ...style,
  };

  // 合并Bootstrap基础按钮类与自定义className
  const buttonClasses = `btn ${className}`;

  return (
    <button
      className={buttonClasses}
      style={mergedStyles}
      {...restProps}
    />
  );
};

export default CustomBootstrapButton;

使用示例 #

在你的业务组件中直接引入并使用，可灵活组合自定义参数与Bootstrap自带的样式变体：

import CustomBootstrapButton from './CustomBootstrapButton';

const DemoPage = () => {
  return (
    <div className="container mt-4">
      {/* 基础Bootstrap按钮 */}
      <CustomBootstrapButton className="btn-primary me-2 mb-2">
        标准按钮
      </CustomBootstrapButton>

      {/* 完全自定义样式的按钮 */}
      <CustomBootstrapButton
        width="220px"
        height="56px"
        textColor="#ffffff"
        bgColor="#17a2b8"
        onClick={() => console.log('自定义按钮触发点击')}
        className="mb-2 me-2"
      >
        自定义蓝灰色按钮
      </CustomBootstrapButton>

      {/* 结合Bootstrap轮廓变体+局部自定义 */}
      <CustomBootstrapButton
        className="btn-outline-warning"
        width="180px"
        textColor="#ffc107"
        disabled
      >
        禁用的轮廓警告按钮
      </CustomBootstrapButton>
    </div>
  );
};

export default DemoPage;

关键说明 #

• 自定义参数（如width、bgColor）会与传入的style属性合并，传入的style优先级更高，方便覆盖特殊场景样式
• 组件继承了原生按钮的所有属性（onClick、disabled、type等），无需额外处理即可使用
• 可根据需求扩展更多自定义样式参数（如borderRadius、padding），只需在CustomBootstrapButtonProps接口中添加对应字段
• 必须引入Bootstrap的CSS文件，否则无法加载基础按钮样式

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