React项目中创建可复用Button组件的最佳实现方式是什么

你想先封装通用样式的Button组件，再通过props传入执行逻辑的思路完全合理，这也是React组件复用的标准实践。你之前设想的通过传入login这类布尔值在组件内部判断执行逻辑的方案确实存在扩展性问题，通用UI组件不应该耦合具体的业务逻辑，正确的实现方式如下：

1. 基础通用Button组件封装 #

首先封装只关心样式、交互状态、基础DOM属性的纯UI组件，完全不耦合任何业务逻辑，所有可变能力都通过props暴露：

• 核心props定义：
  • 样式类：variant（主按钮、次要按钮、危险按钮等样式类型）、size（大中小尺寸）、customStyle（自定义样式扩展）
  • 内容类：children（按钮文本）、icon（图标节点，直接传入React元素即可，无需在组件内部写死新增/编辑等固定图标判断）
  • 交互类：disabled、loading、onClick（点击事件回调，所有业务逻辑都由父组件传入这个回调实现）
  • 原生属性：透传所有button原生属性比如type（submit/button/reset）

代码示例如下：

// 通用Button组件实现，完全通过React控制样式，无需引入外部CSS库
const Button = ({ 
  variant = 'primary', 
  size = 'middle', 
  icon, 
  children, 
  onClick, 
  disabled, 
  loading,
  ...restProps
}) => {
  // 基础样式映射
  const baseStyle = {
    border: 'none',
    borderRadius: '4px',
    cursor: disabled || loading ? 'not-allowed' : 'pointer',
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    opacity: disabled || loading ? 0.6 : 1,
    outline: 'none'
  }
  // 不同类型按钮样式
  const variantStyles = {
    primary: { backgroundColor: '#1677ff', color: '#fff' },
    danger: { backgroundColor: '#ff4d4f', color: '#fff' },
    default: { backgroundColor: '#fff', color: '#333', border: '1px solid #d9d9d9' }
  }
  // 不同尺寸按钮样式
  const sizeStyles = {
    small: { padding: '4px 8px', fontSize: '12px' },
    middle: { padding: '6px 12px', fontSize: '14px' },
    large: { padding: '8px 16px', fontSize: '16px' }
  }

  const handleClick = (e) => {
    if (disabled || loading) return
    onClick?.(e)
  }

  return (
    <button 
      style={{...baseStyle, ...variantStyles[variant], ...sizeStyles[size]}}
      onClick={handleClick}
      disabled={disabled}
      {...restProps}
    >
      {/* 加载状态图标可替换为自己实现的SVG组件 */}
      {loading ? <SpinIcon /> : icon}
      {children}
    </button>
  )
}

2. 不同业务场景的使用方式 #

这个通用组件可以覆盖所有按钮场景，完全不需要在内部耦合业务逻辑：

• 新增/编辑图标按钮场景：直接传入对应的图标组件即可

// 父组件中使用，图标可以是自定义的SVG组件或者第三方图标库组件
import { PlusOutlined, EditOutlined } from yourIconPath

// 新增按钮
<Button icon={<PlusOutlined />} onClick={() => handleAdd()}>新增</Button>

// 编辑按钮
<Button icon={<EditOutlined />} onClick={() => handleEdit()}>编辑</Button>

• 登录/注册按钮场景：分别传入对应的接口请求逻辑即可

// 登录按钮
<Button onClick={async () => {
  const res = await loginApi(formData)
  // 处理登录后逻辑，比如跳转首页、存储用户信息
}}>登录</Button>

// 注册按钮
<Button variant="default" onClick={async () => {
  const res = await registerApi(formData)
  // 处理注册后逻辑
}}>注册</Button>

3. 高频重复业务场景的扩展 #

如果有大量重复的业务按钮逻辑，比如很多页面都用到同逻辑的删除确认按钮，你可以在通用Button的基础上再封装业务层面的按钮组件，不会影响基础组件的通用性：

// 业务层封装的删除按钮，复用基础Button的样式和交互能力
const DeleteButton = ({ onSuccess, recordId }) => {
  const [loading, setLoading] = useState(false)
  const handleDelete = async () => {
    setLoading(true)
    try {
      await deleteApi(recordId)
      onSuccess?.()
      alert('删除成功')
    } finally {
      setLoading(false)
    }
  }
  return <Button variant="danger" loading={loading} onClick={handleDelete}>删除</Button>
}

这样拆分的好处是基础UI组件完全通用，不会被业务逻辑绑架，不管后续有多少种不同功能的按钮，都可以直接复用基础Button的样式和交互能力。

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