Comment puis-je intégrer jQuery dans ReactJS pour créer un accordéon sans sacrifier l'architecture basée sur les composants de React ?

Interfaçage de jQuery avec ReactJS : un guide complet

En tant que débutant en ReactJS, vous pourriez être confronté à des défis lors de la transition de la polyvalence de jQuery à l'approche composée de composants de ReactJS . Cet article vous guidera dans l'intégration de jQuery dans ReactJS, notamment dans le cadre de la création d'un accordéon.

Étape 1 : Comprendre l'accordéon

Sous sa forme HTML , un accordéon se compose de plusieurs sections, chacune contenant un en-tête et un corps pliable. jQuery vous permet de manipuler ces éléments de manière dynamique à l'aide d'écouteurs d'événements.

Étape 2 : Incorporer jQuery dans ReactJS

Pour intégrer jQuery dans ReactJS, suivez ces étapes :

1. Naviguez jusqu'au répertoire de votre projet à l'aide de la ligne de commande.

2. Installez jQuery à l'aide de npm avec la commande :

   npm install jquery --save
   npm i --save-dev @types/jquery

3. Importer jQuery dans le fichier JSX où vous devez l'utiliser :

   import $ from 'jquery';

Étape 3 : Conversion du code jQuery en ReactJS

Pour convertir le jQuery code pour l'accordéon vers ReactJS, vous pouvez utiliser la gestion des états pour gérer la visibilité des sections du corps. Voici un exemple :

import React, { useState } from 'react';

const Accordion = () => {
  const [activeSection, setActiveSection] = useState(null);

  const handleHeadClick = (e) => {
    const section = e.target.parentElement;
    if (section === activeSection) {
      setActiveSection(null);
    } else {
      setActiveSection(section);
    }
  };

  return (
    <div className="accor">
      {sections.map((section) => (
        <div key={section.id} className="section">
          <div className="head" onClick={handleHeadClick}>{section.header}</div>
          <div className={`body ${activeSection === section ? '' : 'hide'}`}>{section.body}</div>
        </div>
      ))}
    </div>
  );
};

Conclusion

En suivant ces étapes, vous pouvez exploiter la puissance de jQuery dans ReactJS et créer des interfaces utilisateur complexes sans compromettre le composant. architecture basée sur ReactJS.

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!