Wie erstelle ich Tabs in ReactJS?

ReactJS ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es bietet einen komponentenbasierten Ansatz für die Webentwicklung, der die Erstellung interaktiver und dynamischer UI-Elemente erleichtert. Registerkarten sind ein gängiges UI-Muster, das zum benutzerfreundlichen Organisieren und Präsentieren von Inhalten verwendet wird. In diesem Artikel erfahren Sie, wie Sie eine Tab-Komponente in ReactJS erstellen.

Voraussetzungen

Bevor Sie diesen Artikel lesen, sollten Sie über ein grundlegendes Verständnis von ReactJS und seinen Kernkonzepten verfügen. Stellen Sie sicher, dass Node.js und npm (Node Package Manager) auf Ihrem Computer installiert sind.

Richten Sie ein neues React-Projekt ein

Erstellen wir zunächst ein neues React-Projekt mit der Create React App, einem Tool, das beim Erstellen neuer React-Projekte mit grundlegender Projektstruktur hilft. Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus:

npx create-react-app tab-example

Methode 1: UseRef Hook verwenden

useRef-Hook ist ein integrierter React-Hook, der es uns ermöglicht, veränderliche Referenzen auf Elemente in Komponenten zu erstellen. Damit können wir den aktiven Tab-Status in der Tab-Komponente verwalten.

Beispiel

Im folgenden Code importieren wir zunächst die notwendigen Abhängigkeiten und richten unseren Funktionskomponenten-Tab ein. Innerhalb der Komponente erstellen wir einen useRef-Hook namens tabsRef, um ein Array von Tab-Objekten zu speichern. Dadurch können wir auf die Registerkarte und ihre Eigenschaften verweisen. Wir verwenden auch den useState-Hook, um eine Statusvariable namens activeTab zu erstellen, um die aktuell aktive Registerkarte zu verfolgen. Die handleTabClick-Funktion ist für die Aktualisierung des ActiveTab-Status verantwortlich, wenn auf eine Registerkarte geklickt wird. Die renderTabs-Funktion durchläuft das tabsRef.current-Array und rendert die Tab-Titel. Es fügt die Klasse „Aktivität“ zur aktuell aktiven Registerkarte hinzu. Schließlich geben wir das JSX-Markup für die Registerkarte und den Inhalt der aktiven Registerkarte zurück.

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;

Ausgabe

Methode 2: Verwenden Sie den useReducer Hook

Der useReducer-Hook ist ein weiterer integrierter React-Hook, der eine Möglichkeit bietet, komplexe Zustandslogik besser organisiert zu verwalten. Wir können diesen Hook verwenden, um Statusänderungen der Registerkarte zu verarbeiten.

Beispiel

Im folgenden Code initialisieren wir das Statusobjekt mit einem leeren „tabs“-Array und setzen die „activeTab“-Eigenschaft auf 0. Durch die ordnungsgemäße Initialisierung des Statusobjekts stellen wir sicher, dass das Array „state.tabs“ nicht undefiniert ist, sodass wir es zuordnen und auf die Registerkartenobjekte und ihre Eigenschaften zugreifen können.

Die im „tab-content“-Div verwendete „?.content“-Syntax stellt sicher, dass auf die Inhaltseigenschaft nur zugegriffen wird, wenn das aktuelle Tab-Objekt definiert ist. Dies verhindert Fehler beim Tab-Wechsel.

Sie können die Darstellung von Tab-Titeln und Inhalten entsprechend Ihren spezifischen Designanforderungen anpassen.

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;

Ausgabe

Methode 3: Status und Requisiten verwenden

Die dritte Methode besteht darin, den Status und die Eigenschaften der Komponente zu verwenden, um aktive Registerkarten zu verwalten. Diese Methode eignet sich eher für einfache Fälle, in denen die Tab-Logik nicht zu komplex ist.

Beispiel

Im folgenden Code definieren wir das Array „tabs“ in der Tab-Komponente, um die notwendigen Daten für den Tab-Titel und -Inhalt bereitzustellen. Durch die Definition des „tabs“-Arrays innerhalb der Komponente stellen wir sicher, dass es im Rahmen der Komponente zugänglich ist. Der useState-Hook wird zum Verwalten des aktiven Tab-Status verwendet, wobei der Anfangswert auf 0 gesetzt ist. Die handleTabClick-Funktion aktualisiert die aktive Registerkarte, wenn auf die Registerkarte geklickt wird. Die renderTabs-Funktion ordnet das Array „tabs“ zu und rendert die Tab-Titel. Die Klasse „active“ wird basierend auf dem activeTab-Status auf die aktive Registerkarte angewendet.

Tab content div zeigt den Inhalt des aktuell aktiven Tabs an.

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;

Ausgabe

Fazit

In diesem Artikel haben wir besprochen, wie man Tabs in Reactjs erstellt. Wir haben eingeführt, dass der Hook „useRef“ für die Verwaltung veränderlicher Referenzen nützlich ist, der Hook „useReducer“ einen strukturierteren Ansatz für die Statusverwaltung bietet und die Methoden „state“ und „props“ für einfachere Tab-Implementierungen geeignet sind. Wenn Sie diese Techniken verstehen, können Sie interaktive und benutzerfreundliche Registerkartenkomponenten in Ihren React-Anwendungen erstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Tabs in ReactJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!