如何在 ReactJS 中创建选项卡？

ReactJS 是一个流行的 JavaScript 库，用于构建用户界面。它提供了一种基于组件的 Web 开发方法，使创建交互式动态 UI 元素变得更加容易。选项卡是一种常见的 UI 模式，用于以用户友好的方式组织和呈现内容。在本文中，我们将探讨如何在 ReactJS 中创建选项卡组件。

先决条件

在阅读本文之前，您应该对 ReactJS 及其核心概念有基本的了解。确保您的计算机上安装了 Node.js 和 npm（节点包管理器）。

设置新的 React 项目

首先，让我们使用 Create React App 创建一个新的 React 项目，该工具有助于创建具有基本项目结构的新 React 项目。打开终端并运行以下命令：

npx create-react-app tab-example

方法一：使用UseRef Hook

useRef 钩子是一个内置的 React 钩子，它允许我们创建对组件中元素的可变引用。我们可以使用它来管理选项卡组件中的活动选项卡状态。

示例

在下面的代码中，我们首先导入必要的依赖项并设置我们的功能组件选项卡。在组件内部，我们创建一个名为 tabsRef 的 useRef 钩子来存储选项卡对象的数组。这允许我们引用选项卡及其属性。我们还使用 useState 挂钩创建一个名为 activeTab 的状态变量来跟踪当前活动的选项卡。 handleTabClick 函数负责在单击选项卡时更新 activeTab 状态。 renderTabs 函数迭代 tabsRef.current 数组并呈现选项卡标题。它将“活动”类添加到当前活动选项卡。最后，我们返回选项卡和活动选项卡内容的 JSX 标记。

import React, { useRef, useState } from 'react';
import './Tabs.css'; // Import the CSS file
const Tabs = () => {
  const tabsRef = useRef([{ title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' }]);
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const renderTabs = () => {
    return tabsRef.current.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">
        {tabsRef.current[activeTab].content}
      </div>
    </div>
  );
};

export default Tabs;
  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">
        {tabsRef.current[activeTab].content}
      </div>
    </div>
  );
};

export default Tabs;

输出

方法2：使用useReducer Hook

useReducer 钩子是另一个内置的 React 钩子，它提供了一种以更有组织的方式管理复杂状态逻辑的方法。我们可以利用这个钩子来处理选项卡的状态更改。

示例

在下面的代码中，我们使用空的“tabs”数组初始化状态对象，并将“activeTab”属性设置为0。通过正确初始化状态对象，我们确保“state.tabs”数组不是未定义的，允许我们映射它并访问选项卡对象及其属性。

“tab-content”div 中使用的“?.content”语法可确保仅在定义了当前选项卡对象时才访问内容属性。这可以防止切换选项卡时出现错误。

您可以根据您的具体设计要求自定义选项卡标题和内容的呈现。

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_ACTIVE_TAB':
      return { ...state, activeTab: action.payload };
    default:
      return state;
  }
};

const Tabs = () => {
  const [state, dispatch] = useReducer(reducer, { tabs: [{ title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' }
], activeTab: 0 });

  const handleTabClick = (index) => {
    dispatch({ type: 'SET_ACTIVE_TAB', payload: index });
  };

  const renderTabs = () => {
    return state.tabs.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={state.activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">{state.tabs[state.activeTab]?.content}</div>
    </div>
  );
};

export default Tabs;

输出

方法3：使用State和Props

第三种方法涉及使用组件的状态和属性来管理活动选项卡。此方法更适合选项卡逻辑不太复杂的简单情况。

示例

在下面的代码中，我们在选项卡组件中定义“选项卡”数组，为选项卡标题和内容提供必要的数据。通过在组件内定义“tabs”数组，我们确保它可以在组件的范围内访问。 useState 挂钩用于管理活动选项卡状态，初始值设置为 0。handleTabClick 函数在单击选项卡时更新活动选项卡。 renderTabs 函数映射“tabs”数组并呈现选项卡标题。 “active”类根据 activeTab 状态应用于活动选项卡。

选项卡内容 div 显示当前活动选项卡的内容。

import React, { useState } from 'react';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);

  // Define the tabs array within the component
  const tabs = [
    { title: 'Tab 1', content: 'Content 1' },
    { title: 'Tab 2', content: 'Content 2' },
    { title: 'Tab 3', content: 'Content 3' }
  ];

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const renderTabs = () => {
    return tabs.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">{tabs[activeTab]?.content}</div>
    </div>
  );
};

export default Tabs;

输出

结论

在本文中，我们讨论了如何在 Reactjs 中创建选项卡。我们介绍了 useRef 钩子对于管理可变引用很有用，useReducer 钩子提供了一种更结构化的状态管理方法，而 state 和 props 方法适合更简单的选项卡实现。通过了解这些技术，您可以在 React 应用程序中创建交互式且用户友好的选项卡组件。

以上就是如何在 ReactJS 中创建选项卡？的详细内容，更多请关注编程之家其它相关文章！