如何在 React 中创建标签管理器

标签管理器是你在项目中可能用过的基本工具之一。在本文中，我们将学习如何仅用几行代码为我们的项目创建一个自定义的可重复使用的标签管理器。

整个标签管理器组件分为3个基本部分。

第一部分将是一个对象数组，它将是我们的标签。
第二部分将在单击选项卡元素时更新活动选项卡，以便当我们单击任何选项卡时，我们可以将该选项卡显示为选定选项卡。
第三部分是我们仅向标签管理器提供活动标签 ID 的部分。

让我们开始为 tabManager 组件编写代码。

我们的组件将只接收 3 个 props，即activeTab、handleTab和tabs。

在 tabManager 组件的 render 方法中，我们首先使用父 div 包装整个组件。

 <div className="tab-manager">

</div>

在这个父容器内，我们将在 tabs 道具上运行一个地图。

{tabs.map(({ label, value }) => (
          <div
            className={`tab ${value === activeTab ? 'selected-tab' : ''}`}
            onClick={() => { handleTab(value); }}
          >
            {label}
          </div>
        ))}

正如您所看到的，我们只是在tabs prop 上运行一个地图，它基本上是一个对象数组，每个数组只有 2 个键，即标签和值。

我们可以使用 label 在子 div 中显示标签，该 div 将由地图返回。点击该子 div 时，我们可以使用handleTab属性传递值，该属性本质上是一个函数。现在，我们还可以使用 activeTab 属性在标签管理器组件中显示当前活动标签。

我们可以使用 className 来显示选项卡管理器组件中的活动选项卡。

我们的整个标签管理器组件将会看起来像这样。

import React, { Component } from 'react';
import PropTypes from 'prop-types';


export class TabManager extends Component {
  state = {}

  render() {
    const { activeTab, handleTab, tabs } = this.props;
    return (
      <div className="tab-manager">
        {tabs.map(({ label, value }) => (
          <div
            className={`tab ${value === activeTab ? 'selected-tab' : ''}`}
            onClick={() => { handleTab(value); }}
          >
            {label}
          </div>
        ))}
      </div>
    );
  }
}

TabManager.propTypes = {
  activeTab: PropTypes.number.isRequired,
  handleTab: PropTypes.func.isRequired,
  tabs: PropTypes.arrayOf(Object).isRequired,
};

之后我们可以添加一些最小样式来展示我们的组件。

.App {
  font-family: sans-serif;
  text-align: center;
}
.tab-manager {
  display: flex;
  padding: 24px;
  justify-content: center;
  border-bottom: 1px solid #48484859;
}
.tab {
  padding: 12px;
  border-radius: 25px;
  text-align: center;
  cursor: pointer;
  padding: 12px 36px;
  margin: 0 24px;
  font-size: 16px;
  letter-spacing: 0.5px;
  transition: all 0.5s ease;
  color: black;
  user-select: none;
}
.tab:hover {
  background-color: rgba(0, 43, 73, 0.17);
}

.selected-tab {
  background-color: #002b49;
  color: white;
}

.tab-content {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

现在是时候调用我们的组件了。

我们可以像这样导入我们的组件。

import { TabManager } from "./tabManager";

让我们使用钩子来管理activeTab。

  const [activeTab, handleTab] = useState(0);

我们可以创建一些虚拟标签数组。

const TABS = [
  { label: "Tab 1", value: 1 },
  { label: "Tab 2", value: 2 },
  { label: "Tab 3", value: 3 }
];

我们的文件最终看起来会像这样。

import React, { useState } from "react";

import { TabManager } from "./tabManager";
import "./styles.css";

const TABS = [
  { label: "Tab 1", value: 1 },
  { label: "Tab 2", value: 2 },
  { label: "Tab 3", value: 3 }
];
export default function App() {
  const [activeTab, handleTab] = useState(0);
  return (
    <div className="App">
      <TabManager tabs={TABS} activeTab={activeTab} handleTab={handleTab} />
      <div className="tab-content">
        {" "}
        <div> Content of Tab {activeTab}</div>
      </div>
    </div>
  );
}

您可以看到如下所示的输出。

你也可以在 codeSandbox 上查看源代码。希望你已经学会了如何在 React 中创建标签管理器。

还请查看如何在 React 中创建对话框。

文章来源：https://dev.to/narendersaini32/how-to-create-tab-manager-in-react-4hb6