reactjs 在React中更改组件的显示属性

xu3bshqb  于 2023-01-30  发布在  React
关注(0)|答案(2)|浏览(185)

我是一个初学者在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;
uyhoqukh

uyhoqukh1#

使用useState挂接更改组件中的状态

vd2z7a6w

vd2z7a6w2#

最好的解决方案是使用useState钩子并传入布尔值true或false。True将呈现导航栏组件,而false将不呈现它。下面的链接介绍了如何以最佳方式实现此功能(https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/

相关问题