ReactJs实现Angular式Output事件方案问询（原子设计组件库）

嘿，这个需求在React里实现起来非常直接，完全不用依赖组件内部的state，刚好契合你要保持Button组件独立的原子设计理念！

核心思路 #

React里没有Angular那样的@Output装饰器，但我们可以通过props传递回调函数来实现完全等价的效果：父组件把处理点击逻辑的函数传给Button组件，Button在被点击时直接调用这个回调，把事件（或自定义数据）传递给父组件——全程Button组件不需要维护任何内部状态，只做渲染和触发回调的本职工作。

具体实现代码 #

1. 独立的Button组件（无内部State）

// Button.jsx
import React from 'react';

// 解构props时，给onClick设置空函数默认值，避免未传入时报错
const Button = ({ onClick = () => {}, children, ...restProps }) => {
  return (
    <button
      // 点击时触发父组件传入的回调，同时传递原生事件对象
      onClick={(e) => onClick(e)}
      // 传递其他所有props（比如className、disabled、type等），保持组件灵活性
      {...restProps}
    >
      {children}
    </button>
  );
};

export default Button;

2. 父组件使用Button（绑定回调）

// ParentComponent.jsx
import React from 'react';
import Button from './Button';

const ParentComponent = () => {
  // 父组件定义自己的点击处理逻辑
  const handleButtonClick = (clickEvent) => {
    console.log("Button被点击了，原生事件：", clickEvent);
    // 在这里可以做任何父组件需要的操作：提交表单、弹窗、更新父组件状态等
  };

  return (
    <div className="parent-container">
      <h2>父组件示例</h2>
      {/* 把父组件的回调函数通过onClick props传给Button */}
      <Button 
        onClick={handleButtonClick}
        className="primary-button"
        type="button"
      >
        点击触发父组件回调
      </Button>
    </div>
  );
};

export default ParentComponent;

进阶：传递自定义数据给父组件 #

如果Button需要把一些自身的信息（比如按钮标识、自定义参数）传递给父组件，只需要在调用回调时额外传参即可：

// Button组件里修改onClick触发逻辑
onClick={(e) => onClick(e, "button-1", "自定义参数")}

// 父组件接收多参数
const handleButtonClick = (clickEvent, buttonId, customParam) => {
  console.log(`按钮${buttonId}被点击，参数：${customParam}`);
};

为什么这个方案符合你的需求？ #

• 完全无内部State：Button组件只负责渲染和转发事件，所有逻辑都交给父组件，保持原子组件的独立性和单一职责
• 类似Angular Output的体验：父组件通过props绑定回调，就像Angular里用(outputEvent)="handleEvent()"一样直观
• 高度灵活：支持传递任意原生button的props，同时可以扩展自定义回调参数

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