ReactJS 如何创建选项卡

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

先决条件

阅读本文之前，你应该对ReactJS及其核心概念有基本的了解。确保你的机器上安装了Node.js和npm（Node Package Manager）。

设置一个新的React项目

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

npx create-react-app tab-example

方法1：使用UseRef Hook

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

示例

在下面的代码中，我们首先导入必要的依赖项并设置我们的功能组件Tabs。在组件内部，我们创建一个名为tabsRef的useRef hook，用于存储一个标签对象数组。这样我们就可以引用标签及其属性。我们还使用useState hook创建一个名为activeTab的状态变量，用于跟踪当前活动的标签。handleTabClick函数负责在点击标签时更新activeTab状态。renderTabs函数遍历tabsRef.current数组并渲染标签标题。它为当前活动的标签添加了’active’类。最后，我们返回标签和活动标签内容的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;

输出

ReactJS 如何创建选项卡

方法2：使用 useReducer Hook

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

示例

在下面的代码中，我们用一个空的 ‘tabs’ 数组和 ‘activeTab’ 属性设置为 0 来初始化状态对象。通过正确初始化状态对象，我们确保 ‘state.tabs’ 数组不是 undefined，这允许我们对其进行映射并访问选项卡对象及其属性。

‘tab−content’ div 中使用的 ‘?.content’ 语法确保只有在当前选项卡对象被定义的情况下才访问 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;

输出

ReactJS 如何创建选项卡

方法3：使用状态和属性

第三种方法是使用组件的状态和属性来管理活动选项卡。这种方法适用于较简单的情况，其中选项卡逻辑不是过于复杂。

示例

在下面的代码中，我们在Tabs组件内部定义了’tabs’数组，提供了选项卡标题和内容的必要数据。通过在组件内定义’tabs’数组，我们确保它在组件的范围内可访问。useState钩子用于管理活动选项卡的状态，初始值设置为0。当点击一个选项卡时，handleTabClick函数将更新活动选项卡。renderTabs函数在’tabs’数组上进行映射并渲染选项卡标题。根据activeTab状态，将’active’类应用于活动选项卡。

tab−content 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;