我在Navbar.js
组件中有一个菜单栏的onclick函数,我想在App.js
中调用它,这样当我切换菜单栏时,我可以在我的网站中移动一些特定的页面。
这是我的App.js
,路由内div与mainpage的className是路由/页面,我想移动每当我切换菜单栏
function App() {
return (
<AuthProvider>
<Router>
<PrivateRoute path="/" component={Navubaru}/>
<div className="mainpage">
<Route path="/home" component={Home}/>
</div>
</Router>
<Container className="d-flex align-items-center justify-content-center" style={{ minHeight: "100vh"}}>
<div className="w-100" style={{maxWidth:'400px'}}>
<Router>
<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>
</Router>
</div>
</Container>
</AuthProvider>
)}
export default App
这是我的Navbar.js
它包含了侧边栏和导航栏,它还包含了onClick函数我试图调用在App.js:
import React, { useState } 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';
export default function Navubaru({component: Component, ...rest}) {
const { currentUser } = useAuth()
const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
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>
)
}
导出函数,然后在App.js中按名称导入
,
//NavBar.js
export const showSidebar = () => setSidebar(!sidebar);
//App.js
import { showSidebar } from ./path/to/NavBar.js
然后做你想做的
同样值得注意的是,更新引用前一状态的状态的正确方法是使用回调。
export const showSidebar = () => setSidebar((oldState) => !oldState)
https://reactjs.org/docs/hooks-reference.html functional-updates
很容易从另一个组件或文件调用一个组件的任何已分配事件。在这里,您需要了解这些钩子。
useRef()
forwardRef()
这里我通过forwardRef钩子传递了这个组件,这样我就可以从另一个组件或文件调用这个组件的任何分配的事件。像app.js
/**
*
* Navbar.js
*
*/
import { forwardRef } from "react";
const Navbar = (props, ref) => {
const onClickHandler = () => {
alert('clicked the inner button');
}
return (
<button onClick={onClickHandler} ref={ref} {...props}> Inner Component Button </button>
)
}
export default forwardRef( Navbar )
这是我的app.js文件,我通过使用useRef hook
调用事件import { useRef } from "react";
import Navbar from "./Navbar";
const App = () => {
const buttonRef = useRef(null);
const outerClickHandler = () => {
if( buttonRef.current ) {
buttonRef.current.click()
}
}
return (
<div className="App">
<button onClick={outerClickHandler}> Outer button </button>
<Navbar ref={buttonRef}/>
</div>
);
};
export default App;