如何在React中建立一个标签组件

标签是向用户渲染和显示分节的用户界面组件；它们将内容排列成类别以方便访问，并通过节省空间使你的应用程序看起来更干净。标签是一种普遍的UI组件，作为一个开发者，了解如何实现它们是非常重要的。

本文将告诉你如何在React中建立一个标签组件，并创建处理标签切换的函数。

我们将涵盖以下内容。

• 用Create React App设置一个示例项目
• 创建一个标签组件
• 塑造标签组件的风格
• 介绍用于状态管理的ReactuseState
• 创建一个函数来处理标签

前提条件

要继续学习本教程，你需要在你的机器上安装Node.Js。你还应该对以下内容有一定的了解。

• CSS
• JavaScript
• React
• React钩子

设置一个示例项目

让我们为本教程设置一个新的示例项目。为了开始，我们需要使用Create React App创建一个新项目。在你的终端运行以下命令。

npx create-react-app tab-component-sample

上述命令将下载所有的包，这些包是让你的React应用运行所需的。

接下来，用下面的命令将你的目录改为新创建的应用程序的目录。

cd tab-component-sample

使用下面的代码，启动你的本地开发服务器，查看Create React App样本网络应用。

npm start

现在，打开一个新标签，渲染Create React App中包含的样本模板。如果它没有自动打开，打开你的浏览器并输入http://localhost:3000/。

创建一个标签组件

在我们开始创建一个组件之前，我们需要删除Create React App的模板。在源文件夹中，找到App.css 和Index.css 文件，清除写在那里的样式（我们将创建我们自己的）。

打开App.js 文件，删除所有包裹在带有app类名称的div内的内容，并删除导入SVG标识的那一行。

import logo from './logo.svg';

清理后的App.js 文件应该是这样的。

import './App.css';
function App() {
  return (
    <div className="App">             
    </div>
  );
}
export default App;

在你的src 文件夹中，创建一个名为Components 的新文件夹，用来存放我们将要创建的组件。然后再创建一个名为TabComponent 的子文件夹，它将放置Tabs.js 文件。

src
    +-- Components
      +-- TabComponent
        +-- Tabs.js

现在，在Tab.js 文件中添加以下代码，以显示我们正在导出它。

import React from "react";
const Tabs = () => {
  return (
    <div className="Tabs">
      <p>Hello Tab works</p>
    </div>
  );
};
export default Tabs;

接下来，我们需要将Tabs.js 文件导入到App.js 文件中。

import "./App.css";
import Tabs from "./Components/TabComponent/Tabs";
function App() {
  return (
    <div className="App">
      <Tabs />
    </div>
  );
}
export default App;

如果在你这边没有显示，请确认你正在导入组件并正确导出它。

在你的Tabs.js 文件中添加以下代码。

`import React from "react";
const Tabs = () => {
  return (
    <div className="Tabs">
      {/* Tab nav */}
      <ul className="nav">
        <li>Tab 1</li>
        <li>Tab 2</li>
      </ul>
      <div className="outlet">
        {/* content will be shown here */}
      </div>
    </div>
  );
};
export default Tabs;

在上面的代码中，我们有两个部分包裹在父标签的div ：nav ，和outlet 。nav 处理标签之间的导航，而outlet 将呈现活动标签的内容。

当你在浏览器中查看时，它看起来很丑，而且没有任何意义，但我们稍后会添加一些CSS。

下一步是为每个标签创建组件。在本指南中，我们将创建两个。

在components 文件夹中，创建一个新的文件夹并命名为AllTabs 。然后，创建两个文件，分别命名为FirstTab.js 和SecondTab.js 。

src
    +-- Components
      +-- AllTabs
        +-- FirstTab.js
        +-- SecondTab.js

firstTab.js 文件包含需要在第一个标签上显示的代码，而secondTab.js 包含应该在第二个标签上显示的内容。

// FirstTab.js

import React from "react";
const FirstTab = () => {
  return (
    <div className="FirstTab">
      <p>First Tab!! Hurray!!</p>
      {/* First tab content will go here */}
    </div>
  );
};
export default FirstTab;


// SecondTab.js

import React from "react";
const SecondTab = () => {
  return (
    <div className="SecondTab">
      <p>Second Tab!! Hurray!!</p>
      {/* Second  tab content will go here */}
    </div>
  );
};
export default SecondTab;

这就是我们现在需要的一切。现在我们需要的就是这些了，让我们继续进行样式设计。

标签组件的样式

我们需要为我们到目前为止所创建的东西添加一些样式。在本指南中，我们将在App.css 文件中编写所有的样式。你可以自由地为每个组件创建单独的样式文件，但不要忘记导入它们。

首先，让我们删除浏览器为我们的元素添加的默认样式，因为我们想自己控制边距和填充。使用CSS中的星号选择器，我们可以选择网络应用中的每一个元素，并按我们的意愿为它们设置样式。

box-sizing 我们将重置所有的边距和填充为零，并为每个元素提供一个border-box ，包括元素宽度的所有填充和边框。

/* Remove browser defaults */
* {
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}
...

现在，让我们来设计我们的app.js 包装器。这是一个演示应用程序，所以它将是一个单页，占据整个屏幕的宽度和高度。我们还需要应用程序中的所有元素都在中间居中。

// Style App.js wrapper
.App {
 width: 100vw;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}
...

接下来，让我们对我们的Tabs 组件进行造型。样式设计将很简单；只需添加一些边距和填充物作为间距，以及一个背景颜色，使其看起来漂亮。

/* Tab Container */
.Tabs {
 width: 80%;
 height: auto;
 min-height: 400px;
 background: #053742;
 margin: 3.5rem auto 1.5rem;
 padding: 2rem 1rem;
 color: #E8F0F2;
 border-radius: 2rem;
 @media (max-width: 769px) {
  padding: 2rem 0;
 }
}
...

接着，我们需要将我们的导航按钮与标签主体区分开来，以便用户能够快速看到导航器并在标签之间切换。

/* Tab Navigation */
ul.nav {
  width: 60%;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #39A2DB;
  border-radius: 2rem;
  @media (max-width: 768px) {
    width: 90%;
  }
}
ul.nav li {
  width: 50%;
  padding: 1rem;
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.7s;
  border-bottom-left-radius: 2rem;
  border-top-left-radius: 2rem;
}
ul.nav li:nth-child(2) {
  border-radius: 0;
  border-bottom-right-radius: 2rem;
  border-top-right-radius: 2rem;
}
ul.nav li:hover {
  background: rgba(50, 224, 196, 0.15);
}
ul.nav li.active {
  background: #39A2DB;
}
...

最后，让我们为我们的演示标签内容设置样式。在这篇文章中，我们将使用一个p 标签元素来显示假数据。

/* First and Second Tab Styles */
.FirstTab p,
.SecondTab p {
  font-size: 2rem;
  text-align: center;
}

这是你最终的app.css 文件应该是这样的。

// App.css

/* Remove browser defaults */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
// Style App.js wrapper
.App {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Tab Container */
.Tabs {
  width: 80%;
  height: auto;
  min-height: 400px;
  background: #053742;
  margin: 3.5rem auto 1.5rem;
  padding: 2rem 1rem;
  color: #E8F0F2;
  border-radius: 2rem;
  @media (max-width: 769px) {
    padding: 2rem 0;
  }

}

/* Tab Navigation */
ul.nav {
  width: 60%;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #39A2DB;
  border-radius: 2rem;
  @media (max-width: 768px) {
    width: 90%;
  }
}
ul.nav li {
  width: 50%;
  padding: 1rem;
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.7s;
  border-bottom-left-radius: 2rem;
  border-top-left-radius: 2rem;
}
ul.nav li:nth-child(2) {
  border-radius: 0;
  border-bottom-right-radius: 2rem;
  border-top-right-radius: 2rem;
}
ul.nav li:hover {
  background: rgba(50, 224, 196, 0.15);
}
ul.nav li.active {
  background: #39A2DB;
}

/* First and Second Tab Styles */
.FirstTab p,
.SecondTab p {
  font-size: 2rem;
  text-align: center;
}

在你的浏览器上重新加载该页面，你应该看到类似于下面的图片。

使用useState 进行标签状态管理

当你浏览上面的样式时，你会注意到我们有一个特定的样式用于活动标签，但我们如何知道哪个标签是活动的？为此，我们将使用React HookuseState 来管理我们的状态。你可以在这里阅读更多关于React Hooks和状态管理的信息。

首先，我们需要从React库中导入useState 钩子，并设置默认的活动标签。

import React, { useState } from "react";
const Tabs = () => {
  const [activeTab, setActiveTab] = useState("tab1");
   // ... the previous codes
}
export default Tabs;

接下来，我们将检查标签是否处于活动状态，并将active 类添加到它。否则，我们将删除active 类。

// Tab nav       
      <ul className="nav">
        <li className={activeTab === "tab1" ? "active" : ""}>Tab 1</li>
        <li className={activeTab === "tab2" ? "active" : ""}>Tab 2</li>
      </ul>

当你从浏览器查看时，它应该是这样的。

标签1有一个背景颜色，因为它是活动标签。现在，让我们告诉React DOM，当一个标签处于活动状态时要显示什么内容。

首先，我们需要把我们的第一个和第二个标签文件导入到标签组件中。

import FirstTab from "../AllTabs/FirstTab";
import SecondTab from "../AllTabs/SecondTab";

然后将导入的组件添加到outlet div中。

<div className="outlet">
  <FirstTab />
  <SecondTab />
</div>

当你打开浏览器时，你会看到一点混乱（两个标签的内容都显示在标签1上），但不要担心，我们一会儿就会创造秩序。

就像我们在导航上做了一个检查，为活动导航链接设置一个活动类，我们将在outlet 。

<div className="outlet">
  {activeTab === "tab1" ? <FirstTab /> : <SecondTab />}
</div>

我们在这里做的是告诉React DOM，只有当活动标签"tab1" ，才显示第一个标签。否则会显示第二个标签。

创建一个函数来处理标签切换

当你点击任何一个标签时，什么都不会发生。让我们来改变这种情况。

这个函数将告诉React DOM，当一个标签处于活动状态时，我们要渲染哪个标签的内容。

  //  Functions to handle Tab Switching
  const handleTab1 = () => {
    // update the state to tab1
    setActiveTab("tab1");
  };
  const handleTab2 = () => {
    // update the state to tab2
    setActiveTab("tab2");
  };

这是相当干净和直接的；你甚至可以把它写在一行上，但为了简单起见，让我们把它放在这里。

那么，这段代码在做什么呢？第一个函数在任何时候被调用时都会设置和更新活动标签状态为"tab1" ，第二个函数对"tab2" 。

下一步是将这些函数标记到我们的导航链接上，以便在各自的导航链接被点击时被调用和执行。

{/* Tab nav */}
<ul className="nav">
  <li
    className={activeTab === "tab1" ? "active" : ""}
    onClick={handleTab1}
  >
    Tab 1
  </li>
  <li
    className={activeTab === "tab2" ? "active" : ""}
    onClick={handleTab2}
  >
    Tab 2
  </li>
</ul>

这就是了!现在你可以通过点击各自的导航链接来切换标签。

结论

能走到这一步真是太好了!在本指南中，我们已经建立了一个React标签组件，使用React Hooks来管理我们的活动标签状态，并创建了简单的函数来控制和处理标签切换。

The postHow to build a tab component in Reactappeared first onLogRocket Blog.