Quand et comment utiliser jQuery avec ReactJS ?

Utiliser jQuery avec ReactJS

Introduction

ReactJS est un framework JavaScript populaire qui a suscité des débats sur la redondance potentielle de jQuery dans le développement web. Bien que les deux technologies aient leurs points forts, il peut y avoir des cas où il peut être avantageux d'exploiter les capacités de jQuery dans ReactJS.

Scénario : Création d'un accordéon à l'aide de jQuery

Dans ce scénario, l'utilisateur souhaite implémenter un composant accordéon à l'aide de jQuery, qui consiste à agrandir ou à réduire un corps en cliquant sur sa tête correspondante.

Implémentation de jQuery :

<code class="javascript">$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});</code>

Équivalent ReactJS

Pour obtenir des fonctionnalités similaires dans ReactJS, nous pouvons utiliser la gestion de l'état pour basculer la visibilité de chaque corps.

Gestion de l'état :
Dans ReactJS, l'état est un objet qui contient les valeurs actuelles du composant et détermine son comportement. Nous pouvons définir l'état initial de l'accordéon comme suit :

<code class="javascript">const Accordion = () => {
  const [accordions, setAccordions] = useState([
    { id: 1, title: 'Head 1', content: 'Body 1', visible: false },
    // ...
  ]);
};
</code>

Gestionnaire d'événements :
Nous définissons un gestionnaire d'événements qui gère l'événement click sur l'élément head et met à jour le état en conséquence.

<code class="javascript">const handleClick = (index) => {
  // Clone the current state to avoid mutations
  const newAccordions = [...accordions];
  newAccordions[index].visible = !newAccordions[index].visible;
  setAccordions(newAccordions);
};</code>

Rendu de l'accordéon :

L'accordéon est rendu à l'aide d'une fonction de carte qui parcourt les éléments et affiche conditionnellement le corps en fonction de son visible state.

<code class="javascript">render() {
  return (
    <div>
      {accordions.map((accordion, index) => (
        <AccordionItem key={accordion.id} title={accordion.title} content={accordion.content} visible={accordion.visible} handleClick={() => handleClick(index)} />
      ))}
    </div>
  );
}</code>

Intégrer jQuery

Bien que nous ayons implémenté l'accordéon sans jQuery, il est toujours possible de l'incorporer si vous le souhaitez. En utilisant npm, nous pouvons installer jQuery et l'importer dans notre composant ReactJS.

<code class="javascript">import $ from 'jquery';
// ...

const Button = () => {
  $(document).ready(function(){
    // Use jQuery here
  });

  return (
    <button>...</button>
  );
};</code>

En conclusion, bien qu'il soit possible de répliquer la fonctionnalité jQuery à l'aide de la gestion d'état et du cycle de vie des composants de ReactJS, il peut y avoir des scénarios où c'est plus pratique pour intégrer jQuery pour des tâches spécifiques.

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!