Bagaimanakah saya boleh mengintegrasikan jQuery ke dalam ReactJS untuk membina akordion tanpa mengorbankan seni bina berasaskan komponen React?

Mengantaramukakan jQuery dengan ReactJS: Panduan Komprehensif

Sebagai seorang pemula ReactJS, anda mungkin menghadapi cabaran dalam peralihan daripada kepelbagaian jQuery kepada pendekatan komponen ReactJS . Artikel ini akan membimbing anda melalui penyepaduan jQuery ke dalam ReactJS, khususnya dalam konteks mencipta akordion.

Langkah 1: Memahami Akordion

Dalam bentuk HTMLnya , akordion terdiri daripada berbilang bahagian, setiap satu mengandungi pengepala dan badan boleh lipat. jQuery membolehkan anda memanipulasi elemen ini secara dinamik menggunakan pendengar acara.

Langkah 2: Menggabungkan jQuery ke dalam ReactJS

Untuk menyepadukan jQuery ke dalam ReactJS, ikut langkah berikut:

1. Navigasi ke direktori projek anda menggunakan baris arahan.

2. Pasang jQuery menggunakan npm dengan arahan:

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

3. Import jQuery ke dalam fail JSX di mana anda perlu menggunakannya:

   import $ from 'jquery';

Langkah 3: Menukar Kod jQuery kepada ReactJS

Untuk menukar jQuery kod untuk akordion kepada ReactJS, anda boleh menggunakan pengurusan keadaan untuk mengendalikan keterlihatan bahagian badan. Berikut ialah contoh:

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>
  );
};

Kesimpulan

Dengan mengikuti langkah ini, anda boleh memanfaatkan kuasa jQuery dalam ReactJS dan mencipta antara muka pengguna yang kompleks tanpa menjejaskan komponen- seni bina berasaskan ReactJS.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengintegrasikan jQuery ke dalam ReactJS untuk membina akordion tanpa mengorbankan seni bina berasaskan komponen React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!