Comment créer des onglets dans ReactJS ?

ReactJS est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur. Il fournit une approche du développement Web basée sur les composants qui facilite la création d'éléments d'interface utilisateur interactifs et dynamiques. Les onglets sont un modèle d'interface utilisateur courant utilisé pour organiser et présenter le contenu de manière conviviale. Dans cet article, nous explorerons comment créer un composant onglet dans ReactJS.

Prérequis

Avant de lire cet article, vous devez avoir une compréhension de base de ReactJS et de ses concepts fondamentaux. Assurez-vous que Node.js et npm (gestionnaire de packages de nœuds) sont installés sur votre ordinateur.

Mettre en place un nouveau projet React

Tout d'abord, créons un nouveau projet React à l'aide de Create React App, un outil qui permet de créer de nouveaux projets React avec une structure de projet de base. Ouvrez un terminal et exécutez la commande suivante :

npx create-react-app tab-example

Méthode 1 : utilisez le crochet UseRef

useRef hook est un hook React intégré qui nous permet de créer des références mutables aux éléments des composants. Nous pouvons l'utiliser pour gérer l'état de l'onglet actif dans le composant onglet.

Exemple

Dans le code ci-dessous, nous importons d'abord les dépendances nécessaires et configurons notre onglet de composants fonctionnels. À l’intérieur du composant, nous créons un hook useRef appelé tabsRef pour stocker un tableau d’objets tab. Cela nous permet de référencer l'onglet et ses propriétés. Nous utilisons également le hook useState pour créer une variable d'état appelée activeTab afin de suivre l'onglet actuellement actif. La fonction handleTabClick est responsable de la mise à jour de l'état activeTab lorsque vous cliquez sur un onglet. La fonction renderTabs parcourt le tableau tabsRef.current et restitue les titres des onglets. Il ajoute la classe "Activité" à l'onglet actuellement actif. Enfin, nous renvoyons le balisage JSX pour l'onglet et le contenu de l'onglet actif.

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;

Sortie

Méthode 2 : utilisez le crochet useReducer

Le hook useReducer est un autre hook React intégré qui permet de gérer une logique d'état complexe de manière plus organisée. Nous pouvons utiliser ce hook pour gérer les changements d’état de l’onglet.

Exemple

Dans le code ci-dessous, nous initialisons l'objet d'état avec un tableau "tabs" vide et définissons la propriété "activeTab" sur 0. En initialisant correctement l'objet state, nous nous assurons que le tableau "state.tabs" n'est pas indéfini, ce qui nous permet de le mapper et d'accéder aux objets tab et à leurs propriétés.

La syntaxe "?.content" utilisée dans le div "tab-content" garantit que la propriété content n'est accessible que lorsque l'objet onglet actuel est défini. Cela évite les erreurs lors du changement d’onglet.

Vous pouvez personnaliser la présentation des titres et du contenu des onglets en fonction de vos exigences de conception spécifiques.

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;

Sortie

Méthode 3 : Utiliser l'état et les accessoires

La troisième méthode consiste à utiliser l'état et les propriétés du composant pour gérer les onglets actifs. Cette méthode est plus adaptée aux cas simples où la logique de tabulation n’est pas trop complexe.

Exemple

Dans le code ci-dessous, nous définissons le tableau "onglets" dans le composant onglet pour fournir les données nécessaires pour le titre et le contenu de l'onglet. En définissant le tableau "tabs" au sein du composant, nous nous assurons qu'il est accessible dans le cadre du composant. Le hook useState est utilisé pour gérer l'état de l'onglet actif, avec la valeur initiale définie sur 0. La fonction handleTabClick met à jour l'onglet actif lorsque l'on clique sur l'onglet. La fonction renderTabs mappe le tableau « onglets » et restitue les titres des onglets. La classe "active" est appliquée à l'onglet actif en fonction de l'état activeTab.

Tab content div affiche le contenu de l’onglet actuellement actif.

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;

Sortie

Conclusion

Dans cet article, nous avons expliqué comment créer des onglets dans Reactjs. Nous avons introduit que le hook useRef est utile pour gérer les références mutables, que le hook useReducer fournit une approche plus structurée de la gestion des états et que les méthodes state et props conviennent aux implémentations d'onglets plus simples. En comprenant ces techniques, vous pouvez créer des composants d'onglets interactifs et conviviaux dans vos applications React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!