如何在React中使用类列表？

Question

我试图在页面大小调整时将导航栏从桌面视图更改为移动视图。现在，我将导航栏代码设置为两个不同的组件，一个是桌面视图，一个是移动视图，每个组件都有自己各自的样式。这是我到目前为止的代码： 第一个导航栏：

    
    return (
        <nav id="desktop-nav">
            <div className="logo">Umar Manzoor</div>
            <div>
                <ul className="nav-links">
                    <li><a href="#about">About</a></li>
                    <li><a href="#experience">Experience</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </nav>
    )
}

export default Nav1```

here is the second nav bar component
```const Nav2 = () => {

    const toggleMenu = () => {
        const menu = document.querySelector(".menu-links");
        const icon = document.querySelector(".lined-icon");
        menu.classList.toggle("open");
        icon.classList.toggle("open");
        
    }

    return (
        <nav id="lined-nav">
            <div className="logo">Umar Manzoor</div>
            <div className="lined-menu">
                <div className="lined-icon" onClick={toggleMenu()}>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div className="menu-links">
                    <li><a href="#about" onClick={toggleMenu()}>About</a></li>
                    <li><a href="#experience" onClick={toggleMenu()}>Experience</a></li>
                    <li><a href="#projects" onClick={toggleMenu()}>Projects</a></li>
                    <li><a href="#contact" onClick={toggleMenu()}>Contact</a></li>
                </div>
            </div>
        </nav>
    )
}

export default Nav2```

and heres some css that goes with it:
```@media screen and (max-width: 1100px) {
  #desktop-nav {
    display: none;
  }
  #lined-nav {
    display: flex;
  }
}

.lined-icon span {
  width: 100%;
  height: 2px;
  background-color: black;
  transition: all 0.3 ease-in-out;
}

.menu-links {
  position: absolute;
  top: 100;
  right: 0;
  background-color: white;
  width: fit-content;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3 ease-in-out;
}

.menu-links a {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: black;
  text-decoration: none;
  transition: all 0.3 ease-in-out;
}

.menu-links li {
  list-style: none;
}

.menu-links.open {
  max-height: 300px;
}

.lined-icon.open span:first-child {
  transform: rotate(45deg) translate(10px, 5px);
}

.lined-icon.open span:nth-child(2) {
  opacity: 0;
}

.lined-icon.open span:last-child {
  transform: rotate(-45deg) translate(10px, -5px);
}

.lined-icon span:first-child {
  transform: none;
}

.lined-icon span:first-child {
  opacity: 1;
}

.lined-icon span:first-child {
  transform: none;
}```

I'm getting an error when using classlist to add "open" to the class name to differentiate which navbar to show. How can I get around this? 

Answer 1

据我了解，React中不仅不需要使用javascript变量

classList

，而且在使用React时直接修改DOM也不是一个好主意。

React 在内存中保存对页面上元素的引用，并在接到通知时进行最有效的更新。如果你绕过 React，它不会知道你所做的更改。

我相信 React 库的创建者希望你只通过 JSX 操作 DOM。本文几乎描述了您的确切用例以及如何使用 React 功能的方法：在 React js 中添加和删除 classList