React组件定义：统一样式按钮是否需封装及如何绑定不同onClick

非常建议封装，这是React组件化最典型的适用场景：

• 所有按钮的样式、基础DOM结构只需要维护一份，后续调整设计（比如改主色、加圆角、调整点击动效）只需要改单文件，不会出现多页按钮样式不一致、漏改的问题
• 通用交互逻辑（比如点击防抖、加载态禁用、无权限时置灰、点击埋点）可以统一收敛在组件内，不需要每个用到按钮的页面重复写相同逻辑
• 整体代码量更少，后续排查问题也更方便

靠组件props传参就能实现，封装时不要把点击逻辑写死，把onClick作为组件接收的外部参数透传给原生button元素即可，不同页面使用时传入各自的处理函数就行。

举个最基础的实现例子：
首先是封装好的通用按钮组件CommonButton.jsx：

function CommonButton({ children, onClick, ...rest }) {
  // 这里放所有统一的固定样式，不管是css类名、内联样式、CSS-in-JS写法都可以
  const commonStyle = {
    padding: '8px 16px',
    borderRadius: 4,
    border: 'none',
    background: '#1677ff',
    color: '#fff',
    cursor: 'pointer'
  }

  return (
    <button 
      style={commonStyle}
      onClick={onClick}
      {...rest} // 透传其他属性，比如disabled、自定义data属性等
    >
      {children}
    </button>
  )
}

export default CommonButton

不同页面使用时，只需要传入对应场景的点击处理函数即可，互相不会干扰：

// 首页场景：点击跳转到个人中心
import { useNavigate } from 'react-router-dom'
import CommonButton from './CommonButton'

function HomePage() {
  const navigate = useNavigate()
  const jumpToProfile = () => navigate('/profile')

  return <CommonButton onClick={jumpToProfile}>进入个人中心</CommonButton>
}

// 商品列表页场景：点击刷新商品数据
import { useState } from 'react'
import CommonButton from './CommonButton'

function GoodsPage() {
  const [goodsList, setGoodsList] = useState([])
  const refreshGoods = async () => {
    const res = await fetch('/api/goods')
    setGoodsList(await res.json())
  }

  return <CommonButton onClick={refreshGoods}>刷新商品列表</CommonButton>
}

如果后续要给所有按钮加全局统一的点击逻辑，比如点击埋点，直接在通用组件内部扩展即可，不需要修改各个页面的业务代码：

function CommonButton({ children, onClick, ...rest }) {
  const commonStyle = {/* 统一样式略 */}

  const handleClick = (e) => {
    // 全局统一逻辑：埋点上报
    window.track?.('common_button_click')
    // 执行业务侧传入的自定义点击逻辑
    onClick?.(e)
  }

  return (
    <button style={commonStyle} onClick={handleClick} {...rest}>
      {children}
    </button>
  )
}

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