我是一个初学者在react我尝试用它做一个网站我的问题是改变一个组件的CSS属性从另一个打开一个导航菜单我用querySelector做的,但我不知道这是否是最好的方法
在这里打开导航菜单:
import './Navbar.css'
function Navbar() {
const handOpenMenu = () => {
const navMenu = document.querySelector(".navMenu");
navMenu.style.cssText = 'display: flex'
}
return (
<header className="navbar container">
<a className='logo' href='/#'>pure mix</a>
<i className="fa-solid fa-bars burgerBtn" onClick={handOpenMenu}></i>
</header>
)
}
export default Navbar
此处用于关闭导航菜单:
import "./Navmenu.css";
function Navmenu() {
const handlCloseMenu = () => {
const navMenu = document.querySelector(".navMenu");
navMenu.style.cssText = "display: none";
}
return (
<div className="navMenu">
<a className="navItem" href="/#">
home
</a>
<a className="navItem" href="/#">
about
</a>
<a className="navItem" href="/#">
logo
</a>
<a className="navItem" href="/#">
contact
</a>
<i className="fa-solid fa-xmark close" onClick={handlCloseMenu}></i>
</div>
);
}
export default Navmenu;
2条答案
按热度按时间uyhoqukh1#
使用useState挂接更改组件中的状态
vd2z7a6w2#
最好的解决方案是使用useState钩子并传入布尔值true或false。True将呈现导航栏组件,而false将不呈现它。下面的链接介绍了如何以最佳方式实现此功能(https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/)