如何为基于styled-components的可复用按钮组件添加自定义onClick事件

实现方法 #

你只需要给现有ButtonComponent增加事件透传逻辑即可，不需要改动样式代码，具体操作如下：

1. 首先修改ButtonComponent组件的定义，接收并透传onClick属性到内部的styled按钮元素上，修改后的完整代码如下：

import styled from 'styled-components'

const Button = styled.button`
  background: #0070f3;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  line-height: normal;
  font-family: inherit;
  font-size: inherit;
  color: #FFF;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 20px;
  transition: 0.3s all ease;
  outline: 0;
  border: 0;
  cursor: pointer;
`
export const ButtonComponent = ({ children, className, onClick }) => {
  return (
    <Button className={className} onClick={onClick}>{children}</Button>
  )
}

2. 后续在其他页面调用组件时，给不同的ButtonComponent实例传入不同的onClick回调函数，就能实现不同的点击逻辑，调用示例如下：

// 业务页面内的调用示例
import { ButtonComponent } from './你的组件存放路径'

const DemoPage = () => {
  // 第一个按钮逻辑：弹出提示
  const handleAlert = () => {
    alert('触发提示逻辑')
  }
  // 第二个按钮逻辑：提交表单
  const handleSubmitForm = () => {
    console.log('执行表单提交逻辑')
  }

  return (
    <div>
      <ButtonComponent onClick={handleAlert}>提示按钮</ButtonComponent>
      <ButtonComponent onClick={handleSubmitForm}>提交按钮</ButtonComponent>
    </div>
  )
}

export default DemoPage

如果后续需要支持更多原生按钮的属性（比如disabled、type、鼠标移入事件等），可以用剩余参数简化透传逻辑，不用逐个声明属性：

export const ButtonComponent = ({ children, className, ...restProps }) => {
  return (
    <Button className={className} {...restProps}>{children}</Button>
  )
}

这种写法下所有原生button支持的属性都可以直接在调用时传入，不需要额外修改组件定义。

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