使用 React 编写响应式导航栏！

各位创作者们，

现在是时候使用 React构建一个出色的响应式导航栏了！

如果您更喜欢观看视频版本，请点击此处：

1.构建导航栏组件。

import React from 'react'
import './Navbar.css'

export default function Navbar() {
  return (
    <nav>
      <ul className="list">
          <li className="items">Home</li>
          <li className="items">Services</li>
          <li className="items">Contact</li>
        </ul>
      <button className="btn">BTN</button>
    </nav>
  )
}

2. 在 CSS 文件中设置导航栏的样式。

首先，用你喜欢的样式（用你自己的调色板！）来设计导航栏。确保所有内容居中，并固定在页面顶部。以下是我的做法：

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(45deg, rgb(156, 14, 156), midnightblue);
}

.list {
    list-style-type: none;
    background: linear-gradient(45deg, rgb(156, 14, 156), midnightblue);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.items {
    margin-right: 20px;
    font-size: 20px;
    text-transform: uppercase;
    color: #f1f1f1;
    cursor: pointer;
}

.btn {
    display: none;
    position: absolute;
    right: 10px;
    top: 7px;
    padding: 5px;
    color: #000;
    font-size: 18px;
}

现在，重要的是让它响应（针对移动屏幕），因此添加一个媒体查询：

@media screen and (max-width: 500px){
    .list {
        flex-direction: column;
        height: auto;
    }
    .items:nth-child(1){
        border-top: 1px solid rgba(255, 255, 255, 0.555);
        margin-top: 50px;
    }
    .items {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.555);
        text-align: center;
        margin-right: 0px;
        padding: 20px 0;
    }
    .btn {
        display: block;
    }
}

3.使用 React 实现流畅的切换菜单！

现在终于可以开始使用 React 了！在 Navbar.js 文件中，将你需要的钩子添加到文件顶部：

import React, {useState, useEffect} from 'react'

然后，创建状态，该状态应为 false，因为我们不想在进入网站时看到菜单。在导航栏的链接列表之前添加一个短路运算符，这样，如果切换菜单为 true，它将显示列表，否则它将隐藏它：

export default function Navbar() {
  const [toggleMenu, setToggleMenu] = useState(false)

  return (
    <nav>
      {(toggleMenu && (
      <ul className="list">
      <li className="items">Home</li>
      <li className="items">Services</li>
      <li className="items">Contact</li>
    </ul>
      )}

      <button className="btn">BTN</button>
    </nav>
  )
}

然后，您需要创建一个在单击按钮时切换菜单的函数：

const toggleNav = () => {
    setToggleMenu(!toggleMenu)
  }

将上述功能添加到您的按钮以触发动画：

<button onClick={toggleNav} className="btn">BTN</button>

成功了！但是，如果你把屏幕加宽，链接就会被隐藏，这不是我们想要的。为了解决这个问题，你需要在第一个代码下方添加一个 const，用来检测屏幕宽度：

const [screenWidth, setScreenWidth] = useState(window.innerWidth)

修改是否返回导航的条件，如下所示：

return (
    <nav>
      {(toggleMenu || screenWidth > 500) && (
      <ul className="list">
      <li className="items">Home</li>
      <li className="items">Services</li>
      <li className="items">Contact</li>
    </ul>
      )}

      <button onClick={toggleNav} className="btn">BTN</button>
    </nav>
  )
}

现在，当您扩大页面时，导航栏将在页面顶部显示完整的链接！

4.添加事件。

但是，缩小页面后，菜单会显示，但无法再切换。为了解决这个问题，你需要添加一个事件。使用 hook useEffect，它会在组件挂载完成后触发，从而触发相应的回调函数。

创建一个函数，该函数将在每次窗口缩小或扩大时调用，这要归功于您需要在之后添加的事件监听器：

useEffect(() => {

    const changeWidth = () => {
      setScreenWidth(window.innerWidth);
    }

    window.addEventListener('resize', changeWidth)

  }, [])

现在，每当窗口大小发生变化时，它都会更新组件的状态，以便它从较大的导航栏移动到切换菜单。
等等！你快完成了，但还有最后一件事需要添加到你的钩子中：

useEffect(() => {

   ...

    return () => {
        window.removeEventListener('resize', changeWidth)
    }

  }, [])

建议这样做：你需要使用清理函数。这样，如果你的组件被销毁（无论出于何种原因），它都会从内存中移除事件监听器。

好了！点击此处查看完整代码，全面了解该组件及其 CSS。

来看看我的Youtube 频道吧：https://www.youtube.com/c/TheWebSchool

恩佐。

鏂囩珷鏉ユ簮锛�https://dev.to/ziratsu/code-a-responsive-navbar-with-react-45le