Bila dan Bagaimana Anda Harus Menggunakan jQuery dengan ReactJS?

Menggunakan jQuery dengan ReactJS

Pengenalan

ReactJS ialah rangka kerja JavaScript yang popular yang telah mencetuskan perdebatan tentang potensi redundansi jQuery dalam pembangunan web. Walaupun kedua-dua teknologi mempunyai kekuatan masing-masing, mungkin terdapat keadaan di mana ia berfaedah untuk memanfaatkan keupayaan jQuery dalam ReactJS.

Senario: Mencipta Akordion menggunakan jQuery

Dalam senario ini, pengguna ingin melaksanakan komponen akordion menggunakan jQuery, yang melibatkan mengembangkan atau meruntuhkan badan apabila mengklik kepala yang sepadan.

Pelaksanaan jQuery:

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

ReactJS Equivalent

Untuk mencapai kefungsian serupa dalam ReactJS, kami boleh menggunakan pengurusan keadaan untuk menogol keterlihatan setiap badan.

Pengurusan Negeri:
Dalam ReactJS, keadaan ialah objek yang memegang nilai semasa komponen dan menentukan kelakuannya. Kami boleh mentakrifkan keadaan awal akordion seperti berikut:

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

Pengendali Peristiwa:
Kami mentakrifkan pengendali acara yang mengendalikan acara klik pada elemen kepala dan mengemas kini nyatakan dengan sewajarnya.

<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>

Mempersembahkan Akordion:

Akordion diberikan menggunakan fungsi peta yang berulang ke atas item dan secara bersyarat memaparkan badan berdasarkan yang boleh dilihat negeri.

<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>

Mengintegrasikan jQuery

Walaupun kami telah melaksanakan akordion tanpa jQuery, masih boleh untuk menggabungkannya jika dikehendaki. Dengan menggunakan npm, kami boleh memasang jQuery dan mengimportnya ke dalam komponen ReactJS kami.

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

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

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

Kesimpulannya, walaupun mungkin untuk meniru fungsi jQuery menggunakan pengurusan keadaan dan Kitaran Hayat komponen ReactJS, mungkin terdapat senario di mana ia lebih banyak mudah untuk menyepadukan jQuery untuk tugasan tertentu.

Atas ialah kandungan terperinci Bila dan Bagaimana Anda Harus Menggunakan jQuery dengan ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!