Bagaimanakah Saya Boleh Mengintegrasikan jQuery dengan Berkesan ke dalam Aplikasi React Saya untuk Kefungsian Lanjutan?

Mengintegrasikan jQuery ke dalam ReactJS untuk Kefungsian Lanjutan

Apabila beralih daripada jQuery kepada ReactJS, adalah penting untuk meneroka cara untuk meminimumkan penggunaan jQuery dan memanfaatkan keupayaan React. Satu senario sedemikian melibatkan penciptaan akordion, di mana kaedah slideUp() dan slideDown() jQuery secara tradisinya digunakan:

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

Dalam ReactJS, walau bagaimanapun, kami memerlukan pendekatan alternatif yang selaras dengan falsafah berasaskan komponen.

Langkah 1: Manfaatkan Perpustakaan Luar

Untuk memasukkan jQuery ke dalam ReactJS, kami boleh menggunakan perpustakaan luaran seperti npm. Navigasi ke folder projek anda dan jalankan arahan ini:

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

Ini akan memasang jQuery dan definisi jenisnya.

Langkah 2: Import jQuery

Dalam fail JSX yang anda perlukan fungsi jQuery, import $ daripada 'jquery'.

Contoh:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

// React component code

Langkah 3: Gunakan jQuery dalam Kitaran Hayat React

Tidak seperti jQuery, React mengikuti kitaran hayat komponen. Untuk melaksanakan kod jQuery pada peringkat kitaran hayat tertentu, pertimbangkan untuk menggunakan componentDidMount() atau componentDidUpdate().

componentDidMount() {
  // jQuery code here
}

Contoh Lengkap:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

class Accordion extends React.Component {
  componentDidMount() {
    $('.accor > .head').on('click', function() {
      $('.accor > .body').slideUp();
      $(this).next().slideDown();
    });
  }

  render() {
    return (
      <div>
        <div class="accor">
          <div class="head">Head 1</div>
          <div class="body hide">Body 1</div>
        </div>
        {/* Additional accordion items here */}
      </div>
    );
  }
}

ReactDOM.render(<Accordion />, document.getElementById('root'));

Dengan mengikuti langkah ini , anda boleh menyepadukan jQuery dengan lancar ke dalam aplikasi ReactJS anda apabila perlu, sambil mengekalkan amalan terbaik pembangunan berasaskan komponen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengintegrasikan jQuery dengan Berkesan ke dalam Aplikasi React Saya untuk Kefungsian Lanjutan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!