在ReactJs中输出事件的角度

Question

我一直在寻找在ReactJs中创建类似Angular这样的输出事件的方式。

我正在根据Atomic设计在ReactJs中创建组件库，因此，例如，我在其他组件中注入了Button，并且我想知道如何为Button编写道具，因此每次用户按下按钮时按钮将启动此prop（以Angular方式输出），以在注入它的父对象中检测到。

我不想使用State，因为我希望组件完全独立。

提前致谢

Answer 1

@output EventEmitter在反应中没有等效的方法。执行此操作的标准方法是将props中的回调传递给子组件。像这样：

  class Parent extends React.Component {
      handleChildClicked = () => {
          console.log('child clicked');
      }
      render() {
        <Child onClick={this.handleChildClicked} />
      }
  }

  const Child = (props: Props) => {
    const { onClick } = props;
    return (
      <button onClick={onClick}>Clicky!</button>
    );
  };