React中如何在App.js内调用Navbar组件定义的onclick切换函数

实现方案 #

你需要将侧边栏的开关状态从Navubaru组件提升到App组件中管理，即可同步控制mainpage容器的位移效果，修改步骤如下：

步骤1：调整App.js代码

在App中声明侧边栏状态，将状态和状态更新方法传递给Navubaru组件，同时为mainpage容器绑定动态样式，注意删除原代码中嵌套的内层Router，React路由不允许嵌套使用：

import { useState } from 'react'

function App() {
  // 新增侧边栏状态管理
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  
  return (
    <AuthProvider>
      <Router>
        {/* 传递状态和方法给Navubaru组件 */}
        <PrivateRoute path="/" component={() => <Navubaru sidebar={sidebar} showSidebar={showSidebar} />}/>
        {/* 绑定动态类控制位移 */}
        <div className={`mainpage ${sidebar ? 'mainpage-shift' : ''}`}>
          <Route path="/home" component={Home}/>
        </div>
        <Container className="d-flex align-items-center justify-content-center" style={{ minHeight: "100vh"}}>
          <div className="w-100" style={{maxWidth:'400px'}}>
            <Switch>
              <PrivateRoute exact path="/" component={Dashboard}/>
              <Route path="/signup" component={Signup}/>
              <Route path="/login" component={Login}/>
              <Route path="/forgot-password" component={ForgotPassword}/>
              <Route path="/update-profile" component={UpdateProfile}/>
            </Switch>
          </div>
        </Container>
      </Router>
    </AuthProvider>
  )
}

export default App

步骤2：调整Navubaru.js代码

删除组件内部的sidebar状态定义，改为从props接收状态和更新方法：

import React from 'react'
import {Navbar, Container} from 'react-bootstrap'
import { Link } from 'react-router-dom';
import { useAuth } from "../contexts/AuthContext"
import './styles/styles.css';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { IconContext } from 'react-icons';
import { SidebarItem } from './SidebarItem';

// 新增接收sidebar和showSidebar props
export default function Navubaru({component: Component, sidebar, showSidebar, ...rest}) {
    const { currentUser } = useAuth()
    // 删除原来内部定义的const [sidebar, setSidebar] = useState(false)和showSidebar方法

    return (
        <div>
            
    <Navbar bg="myColor" variant="dark">
    <IconContext.Provider value={{ color: '#fff' }}>
        <Link to='#' className='menu-bars'>
              <FaIcons.FaBars onClick={showSidebar} />
        </Link>
        <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
            <ul className='nav-menu-items' onClick={showSidebar}>
              <li className='navbar-toggle'>
                <Link to='#' className='menu-bars'>
                  <AiIcons.AiOutlineClose />
                </Link>
              </li>
              {SidebarItem.map((item, index) => {
                return (
                  <li key={index} className={item.cName}>
                    <Link to={item.path}>
                      {item.icon}
                      <span>{item.title}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </nav>
        
    
    
    </IconContext.Provider>
    <Container>
    <div className={sidebar ? 'navactive':'navclose'}>
    <Navbar.Brand href="/">Customer Intelligence System</Navbar.Brand>
    </div>
    <Navbar.Toggle />
    <Navbar.Collapse className="justify-content-end">
      <Navbar.Text>
        Signed in as: <a href="/">{currentUser && currentUser.email}</a>
      </Navbar.Text>
    </Navbar.Collapse>
    </Container>
    </Navbar>
    </div>
    )
}

步骤3：添加位移相关CSS样式

在全局样式文件中添加如下规则，位移距离可根据你的侧边栏实际宽度调整：

.mainpage {
  transition: all 0.3s ease;
}
.mainpage-shift {
  transform: translateX(250px);
}

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