如何在 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 中建立選項卡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！