React 实战：教大家如何在 React 中创建导航栏

本文将向您展示如何在 React 中构建导航栏（“navbar”），同时涵盖从设计注意事项到实现和可访问性最佳实践的所有内容。

任何 Web 应用程序的重要部分之一是导航栏，因为它允许用户浏览网站的不同页面和部分。

因此，构建一个包含所需链接的导航栏以及正确的可访问性措施非常重要，以确保您的用户能够在您的应用程序中找到他们的方式。

要点

• 导航栏是任何网站的关键元素，因为它为用户提供了浏览不同页面和部分的方法。

• React 允许创建可重用和模块化组件，使其成为构建导航栏等复杂 UI 的绝佳选择。

• 创建导航栏时，可访问性应该是重中之重，确保所有用户（包括残障人士）都可以有效地浏览您的网站。

什么是导航栏？

导航栏是一种用户界面元素，通常出现在网页的顶部或侧面。

它充当导航辅助工具，提供允许用户访问网站内不同部分或页面的链接或按钮。

它对于创建无缝且直观的用户体验至关重要，因为它可以帮助用户了解网站的结构和层次结构，并使他们能够在应用程序的不同部分之间轻松移动。

以下是精心设计的导航栏的一些示例：

在 React 中构建导航栏

现在我们了解了导航栏的重要性，让我们深入了解使用 React 构建导航栏的过程。

在此示例中，我们将为名为“ShopNow”的电子商务网站创建一个导航栏。

第 1 步：设计导航栏

在开始编码之前，必须对导航栏有一个清晰的设计。

对于我们的 ShopNow 网站，我们的目标是采用简单而现代的设计，并包含以下元素：

• 左侧有徽标

• 指向网站不同部分的链接（例如“产品”、“关于我们”和“联系方式”）

• 带有徽章的购物车图标，显示购物车中的商品数量

• 用于帐户相关操作的用户图标（例如“登录”和“我的帐户”）

第 2 步：设置 React 项目

在开始构建导航栏之前，我们需要设置一个新的 React 项目。您可以通过在终端中运行以下命令来使用Create React App创建一个新的 React 项目：

npx create-react-app shopnow

设置项目后，导航到项目目录并启动开发服务器：

cd shopnow
npm start

第三步：创建导航栏组件

对于像 React 这样的SPA框架，在可重用的独立组件中进行设计和思考非常重要。因此，构建可在整个应用程序中重复使用的组件至关重要。

可重用组件的一种应用是导航栏。您可以创建可在应用程序中重复使用的可重用导航栏组件。

让我们Navbar.js在目录中创建一个名为的新文件src并添加以下代码：

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

const Navbar = () => {
  return (

<nav className="navbar">
  {/* Navbar content will go here */}
</nav>
);
};

export default Navbar;

我们创建了一个名为 的函数组件Navbar，它返回一个<nav>类名为 的元素navbar。我们还将Navbar.css在同一目录中创建一个名为的新文件来设置导航栏的样式。

第四步：添加导航栏结构

现在让我们在组件中添加导航栏的结构Navbar：

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

const Navbar = () => {
  return (

<nav className="navbar">
  <div className="navbar-left">
    <a href="/" className="logo">
      ShopNow
    </a>
  </div>
  <div className="navbar-center">
    <ul className="nav-links">
      <li>
        <a href="/products">Products</a>
      </li>
      <li>
        <a href="/about">About Us</a>
      </li>
      <li>
        <a href="/contact">Contact</a>
      </li>
    </ul>
  </div>
  <div className="navbar-right">
    <a href="/cart" className="cart-icon">
      <i className="fas fa-shopping-cart"></i>
      <span className="cart-count">0</span>
    </a>
    <a href="/account" className="user-icon">
      <i className="fas fa-user"></i>
    </a>
  </div>
</nav>
);
};

export default Navbar;

在此代码中，我们将导航栏分为三个部分：

1. navbar-left。其中包含徽标，它是主页的链接。

2. navbar-center。这包含<ul>导航链接的无序列表 ( )。

3. navbar-right。其中包含一个购物车图标，其中带有显示购物车中商品数量的徽章，以及用于执行帐户相关操作的用户图标。

我们还使用了 Font Awesome 图标作为购物车和用户图标，您需要按照其网站上的说明将其包含在您的项目中。

第 5 步：设置导航栏样式

现在我们已经有了结构，让我们添加一些样式以使我们的导航栏看起来更有吸引力。打开Navbar.css文件并添加以下样式：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.navbar-left .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.navbar-center .nav-links {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-center .nav-links li {
  margin-right: 1rem;
}

.navbar-center .nav-links a {
  color: #fff;
  text-decoration: none;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-right .cart-icon,
.navbar-right .user-icon {
  color: #fff;
  text-decoration: none;
  margin-left: 1rem;
  position: relative;
}

.navbar-right .cart-count {
  background-color: #f44336;
  color: #fff;
  border-radius: 50%;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

第 6 步：导入并渲染导航栏

最后，我们需要导入Navbar组件并将其呈现在我们的App.js文件中：

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

function App() {
  return (
<div>
  <Navbar /v>
  {/* Rest of your app content goes here */}
</div>
);
}

export default App;

现在，当您运行 React 应用程序时，您应该会在页面顶部看到导航栏。

第 7 步：最佳实践：增强可访问性

构建可访问的导航栏对于确保所有用户都可以有效地浏览您的网站至关重要。

以下是一些需要遵循的最佳实践。

• 使用语义 HTML。我们已经在导航栏代码中使用了语义 HTML 元素。主导航部分包装在一个<nav>元素中，链接列表包含在无序列表 ( <ul>) 中，每个链接作为列表项 ( <li>)，链接本身由元素表示<a>。

• 添加 ARIA 角色和属性。我们可以role="navigation"向<nav>元素添加该属性以指示它是导航部分：

<nav className="navbar" role="navigation">
     {/* ... */}
</nav>

• 确保键盘可访问性。 >React 提供了对键盘辅助功能的内置支持。默认情况下，所有交互元素（例如链接和按钮）都可以使用 键聚焦并使用或键tab激活。但是，我们应该测试此功能，以确保它在导航栏中按预期工作。EnterSpace

• 提供清晰的焦点样式。为了提供清晰的焦点样式，我们可以为:focus 链接和图标的状态添加 CSS 规则。以下是我们如何设置导航栏中的焦点链接样式的示例：

.navbar-center .nav-links a:hover {
  color: red;}

• 您可以调整outline和outline-offset属性来实现所需的焦点样式。

• 使用描述性链接文本。在我们的导航栏代码中，我们已经使用了导航链接的描述性链接文本（“产品”、“关于我们”、“联系方式”）。但是，我们应该确保购物车和用户图标的链接文本也是描述性的。实现此目的的一种方法是使用以下aria-label属性添加视觉上隐藏的文本：

<a href="/cart" className="cart-icon" aria-label="Shopping Cart">
  <i className="fas fa-shopping-cart"></i>
  <span className="cart-count">0</span>
</a>
<a href="/account" className="user-icon" aria-label="User Account">
  <i className="fas fa-user"></i>
</a>

使布局响应式。为了使我们的导航栏具有响应能力，我们可以使用 CSS 媒体查询来根据屏幕尺寸调整布局和样式。例如，我们可以隐藏较小屏幕上的导航链接，并将其替换为汉堡菜单：

@media (max-width: 768px) {
  .navbar-center .nav-links {
    display: none;
  }

  .navbar-right {
    display: flex;
    align-items: center;
  }

  .navbar-right .hamburger-menu {
    display: block;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
  }
}

• 在 JavaScript 代码中，我们需要在单击汉堡菜单时处理导航链接的切换。

通过实施这些辅助功能最佳实践，我们可以确保我们的导航栏对所有用户（包括残障人士）都可用且具有包容性。请记住使用各种屏幕阅读器、键盘导航和其他辅助技术来测试您的应用程序，以确保它符合辅助功能标准。

总结

就是这样！您现在拥有一个可以在应用程序中重复使用的导航栏，以确保您的用户能够在您的应用程序中找到他们的方式。

常见问题 (FAQ)