子组件监听父组件事件触发

在 React 中，子组件可以监听父组件传递的事件触发。这可以通过以下步骤完成：

1. 在父组件中定义事件处理函数，并将其作为 props 传递给子组件。例如，假设父组件中有一个按钮，点击该按钮会触发一个名为 `handleEvent` 的事件处理函数。

2. 在子组件中，使用 `props` 接收父组件传递的事件处理函数。例如，可以在子组件的构造函数中使用 `props` 参数来接收该函数，然后将其保存在子组件的状态中。

3. 在子组件中，可以使用保存的事件处理函数来监听相应的事件。例如，在子组件的 `componentDidMount` 生命周期方法中，可以使用 `addEventListener` 方法来监听特定的事件，并在事件触发时调用保存的事件处理函数。

下面是一个示例代码：

// 父组件
class ParentComponent extends React.Component {
  handleEvent = () => {
    // 处理事件的逻辑
  }

  render() {
    return (
      <div>
        <ChildComponent handleEvent={this.handleEvent} />
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      handleEvent: props.handleEvent
    };
  }

  componentDidMount() {
    // 监听事件
    document.addEventListener('click', this.state.handleEvent);
  }

  componentWillUnmount() {
    // 移除事件监听
    document.removeEventListener('click', this.state.handleEvent);
  }

  render() {
    return <div>子组件</div>;
  }
}

在上面的示例中，父组件中的 `handleEvent` 函数通过 props 传递给了子组件。子组件在构造函数中接收并保存了该函数，并在 `componentDidMount` 生命周期方法中使用 `addEventListener` 监听了 `click` 事件。当点击页面时，子组件会触发父组件传递的事件处理函数。