如何在Navbar组件中调用Main组件的函数？是否需用Redux？

完全不用依赖Redux，利用React的状态提升就能解决这个兄弟组件通信的问题——把控制抽屉开关的状态放到它们的共同父组件App.js里，再通过props把方法和状态传递给子组件即可，具体代码修改如下：

修改后的App.js #

import { useState } from 'react';
import Navbar from './navbar';
import Main from './main';

function App() {
  // 把抽屉的开关状态提升到App组件
  const [drawerOpen, setDrawerOpen] = useState(false);

  // 定义打开抽屉的方法
  const showDrawer = () => {
    setDrawerOpen(true);
  };

  return (
    <>
      {/* 把打开方法传给Navbar */}
      <Navbar onShowDrawer={showDrawer} />
      {/* 把抽屉状态和修改方法传给Main */}
      <Main isDrawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
    </>
  );
}

export default App;

修改后的Navbar.js #

// 接收App传来的打开方法，绑定到按钮点击事件
function Navbar({ onShowDrawer }) {
  return (
    <Button type="default" onClick={onShowDrawer}>Send</Button>
  );
}

export default Navbar;

修改后的Main.js #

// 假设你用的是类似Ant Design的Drawer组件，可根据实际组件调整
import { Drawer } from 'antd';

function Main({ isDrawerOpen, setDrawerOpen }) {
  // 定义关闭抽屉的方法
  const closeDrawer = () => {
    setDrawerOpen(false);
  };

  return (
    <div>
      {/* 你的主内容区域 */}
      <Drawer
        title="抽屉标题"
        open={isDrawerOpen}
        onClose={closeDrawer}
      >
        {/* 抽屉内部内容 */}
      </Drawer>
    </div>
  );
}

export default Main;

原理说明 #

状态提升是React组件通信的基础手段：当两个子组件（Navbar和Main）需要共享状态时，将状态转移到它们的共同父组件（App）中，父组件通过props将状态和操作状态的方法分发给子组件，这样Navbar就能触发父组件的方法来修改状态，Main则根据父组件传来的状态控制抽屉的显示/隐藏。

如果你的组件层级比较深，状态提升的props传递会显得繁琐，也可以用React的Context API来实现全局状态共享，但对于这种简单的兄弟组件场景，状态提升已经足够高效，完全没必要用Redux——Redux更适合处理复杂的全局状态管理需求。

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