React中如何监听多层嵌套子组件的事件？

针对你提出的在MainComponent中处理ChildLevel2组件按钮点击事件的需求，下面介绍几种实用的解决方案：

方法一：逐层传递回调函数 #

这是最直观的方式，把父组件的回调函数一层一层往下传递，直到需要触发事件的子组件：

function MainComponent() {
  // 定义要在Main中执行的点击处理逻辑
  const handleButtonClick = () => {
    console.log("按钮在MainComponent中被处理了！");
  };

  return (
    <>
      {/* 把回调传给ChildLevel1 */}
      <ChildLevel1 onButtonClick={handleButtonClick} />
    </>
  );
}

function ChildLevel1({ onButtonClick }) {
  // 直接把接收到的回调传给下一级组件
  return (
    <>
      <ChildLevel2 onButtonClick={onButtonClick} />
    </>
  );
}

function ChildLevel2({ onButtonClick }) {
  // 在按钮的onClick中调用传递过来的回调
  return (
    <>
      <button onClick={onButtonClick}>Click-me!</button>
    </>
  );
}

这种方法适合层级不多的场景，逻辑清晰，但嵌套层级太深时会显得繁琐。

方法二：使用React Context API #

如果嵌套层级非常深，逐层传递回调太麻烦，可以用Context来全局共享事件处理函数，中间组件无需手动传递：

import { createContext, useContext, useEffect } from 'react';

// 创建一个Context
const ButtonClickContext = createContext();

function MainComponent() {
  const handleButtonClick = () => {
    console.log("按钮在MainComponent中被处理了！");
  };

  return (
    {/* 用Provider把回调提供给所有子组件 */}
    <ButtonClickContext.Provider value={handleButtonClick}>
      <ChildLevel1 />
    </ButtonClickContext.Provider>
  );
}

function ChildLevel1() {
  // 中间组件不需要处理回调，直接渲染下一级
  return (
    <>
      <ChildLevel2 />
    </>
  );
}

function ChildLevel2() {
  // 从Context中取出回调函数
  const handleButtonClick = useContext(ButtonClickContext);

  return (
    <>
      <button onClick={handleButtonClick}>Click-me!</button>
    </>
  );
}

这种方法避免了"props drilling"（属性透传）的问题，适合深层嵌套的场景。

方法三：事件总线（Event Bus） #

可以自己实现一个简单的事件发射器，让组件之间通过发布/订阅的方式通信：

// 简单的事件总线实现
const eventBus = {
  events: {},
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  },
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
};

function MainComponent() {
  // 组件挂载时订阅事件
  useEffect(() => {
    const handleClick = () => {
      console.log("按钮在MainComponent中被处理了！");
    };
    eventBus.on('button-click', handleClick);

    // 组件卸载时取消订阅，防止内存泄漏
    return () => {
      eventBus.off('button-click', handleClick);
    };
  }, []);

  return (
    <>
      <ChildLevel1 />
    </>
  );
}

function ChildLevel1() {
  return (
    <>
      <ChildLevel2 />
    </>
  );
}

function ChildLevel2() {
  const handleClick = () => {
    // 触发事件
    eventBus.emit('button-click');
  };

  return (
    <>
      <button onClick={handleClick}>Click-me!</button>
    </>
  );
}

这种方式适合跨组件通信，但要注意在组件卸载时取消订阅，避免内存泄漏。

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