React组件间函数调用：如何复用Top_Menu.jsx的onclick回调？

下面提供几种实用的实现方式，根据你的组件层级关系和场景选择即可：

方法一：状态提升（最常用的基础方案） #

如果Top_Menu和Left_Menu有共同的父组件，直接把回调函数提到父组件中，再通过props传递给两个子组件。

示例代码：

1. 父组件（比如App.jsx）：

import TopMenu from './Top_Menu';
import LeftMenu from './Left_Menu';

function App() {
  // 把Top_Menu原有的onclick逻辑移到这里
  const handleTopMenuClick = () => {
    console.log('TopMenu的回调被触发');
    // 你的业务逻辑...
  };

  return (
    <div>
      <TopMenu onClick={handleTopMenuClick} />
      <LeftMenu triggerTopMenuClick={handleTopMenuClick} />
    </div>
  );
}

export default App;

2. Top_Menu.jsx使用props传入的函数：

function TopMenu({ onClick }) {
  return (
    <button onClick={onClick}>Top Menu按钮</button>
  );
}

export default TopMenu;

3. Left_Menu.jsx调用传入的函数：

function LeftMenu({ triggerTopMenuClick }) {
  return (
    <button onClick={triggerTopMenuClick}>触发TopMenu的回调</button>
  );
}

export default LeftMenu;

方法二：使用React Context（适合多层嵌套场景） #

如果组件层级较深，props传递太繁琐，用Context来共享回调函数更高效。

示例代码：

1. 创建Context文件（比如MenuContext.js）：

import { createContext, useContext } from 'react';

const MenuContext = createContext(null);

export function MenuProvider({ children }) {
  const handleTopMenuClick = () => {
    console.log('TopMenu的回调被触发');
    // 你的业务逻辑...
  };

  return (
    <MenuContext.Provider value={{ handleTopMenuClick }}>
      {children}
    </MenuContext.Provider>
  );
}

export function useMenuContext() {
  return useContext(MenuContext);
}

2. 根组件（App.jsx）中包裹Provider：

import { MenuProvider } from './MenuContext';
import TopMenu from './Top_Menu';
import LeftMenu from './Left_Menu';

function App() {
  return (
    <MenuProvider>
      <TopMenu />
      <LeftMenu />
    </MenuProvider>
  );
}

export default App;

3. Top_Menu.jsx使用Context中的函数：

import { useMenuContext } from './MenuContext';

function TopMenu() {
  const { handleTopMenuClick } = useMenuContext();
  return (
    <button onClick={handleTopMenuClick}>Top Menu按钮</button>
  );
}

export default TopMenu;

4. Left_Menu.jsx调用Context中的函数：

import { useMenuContext } from './MenuContext';

function LeftMenu() {
  const { handleTopMenuClick } = useMenuContext();
  return (
    <button onClick={handleTopMenuClick}>触发TopMenu的回调</button>
  );
}

export default LeftMenu;

方法三：自定义事件（适合无关联组件场景） #

如果两个组件没有共同父组件且层级复杂，可以用浏览器自定义事件实现，但要注意卸载时移除监听避免内存泄漏。

示例代码：

1. Top_Menu.jsx中监听自定义事件：

import { useEffect } from 'react';

function TopMenu() {
  const handleTopMenuClick = () => {
    console.log('TopMenu的回调被触发');
    // 你的业务逻辑...
  };

  useEffect(() => {
    const handleCustomEvent = () => handleTopMenuClick();
    window.addEventListener('triggerTopMenuClick', handleCustomEvent);
    
    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('triggerTopMenuClick', handleCustomEvent);
    };
  }, []);

  return (
    <button onClick={handleTopMenuClick}>Top Menu按钮</button>
  );
}

export default TopMenu;

2. Left_Menu.jsx中触发自定义事件：

function LeftMenu() {
  const triggerCallback = () => {
    window.dispatchEvent(new CustomEvent('triggerTopMenuClick'));
  };

  return (
    <button onClick={triggerCallback}>触发TopMenu的回调</button>
  );
}

export default LeftMenu;

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