Блог

Главная - Вопросы по программированию - Как интегрировать плагин jquery в функциональный компонент react

Как интегрировать плагин jquery в функциональный компонент react

#jquery #reactjs #jquery-plugins #react-hooks #react-functional-component

#jquery #reactjs #jquery-плагины #реагирующие хуки #react-functional-component

Вопрос:

Я разрабатываю приложение, используя функциональный компонент React с помощью react hook. Я интегрирую jquery в свое приложение, следуя коду:

     import React, {useEffect} from 'react'
    import $ from 'jquery'
    window.jquery = window.$ = $
    function App(){
    useEffect(() => {
     if($){
        $('#btn').click(e=>{
           $('#txt').hide()
        })
      }
    },[$])
    
    return (
        <button id='btn'>Click </button>
        <p id='txt'> 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
            an unknown printer took a galley of type and scrambled it to make a type specimen 
            book. 
        </p>
    )

Этот код отлично работает для меня. Но я не могу добавить какой-либо внешний плагин по своему выбору. Пожалуйста, дайте мне идею добавить плагин jquery в мое приложение. Я использовал команду create-react-app.

Комментарии:

1. В большинстве случаев вам не нужно использовать jquery с React. Вместо того, чтобы искать плагины jquery, ищите компонент React в мире с открытым исходным кодом. Вы, скорее всего, найдете некоторые.

2. Для чего-то подобного вам не нужно использовать jQuery, вы должны использовать React. Для более сложных вещей, таких как использование плагинов jQuery, вам нужно использовать class component с componentDidMount, куда вы помещаете свой код jQuery. Я не очень хорошо знаком с крючками React, я не уверен, что вы можете использовать их вместо componentDidMount.

3. На самом деле это просто демонстрационный код, показывающий, как я интегрирую jquery в свое приложение react. А также моя команда очень хорошо разбирается в jquery. Итак, я хочу использовать jquery в приложении. А также мне не интересно использовать компоненты на основе классов.

4. Привет @TakiuddinAhmed, не удалось узнать, как использовать jQuery с функциональными компонентами? Я пытаюсь сделать то же самое. Я в основном пытаюсь интегрировать datatables.net в мое приложение React. Я могу конвертировать App.js в функциональный компонент, но испытывающий трудности с преобразованием моего Tbl.js компонент в функциональный компонент.

Ответ №1:

хуки @stminion001 позволяют нам достичь этой функциональности. Вы можете интегрировать datatables.net используя этот подход. Чтобы добавить пакет в зависимости: npm установите jquery datatables.net

     import React, {useEffect, useRef} from 'react';

    const $ = require('jquery');
    $.DataTable = require('datatables.net');

    const CustomDataTable = (props) => {
      
      const myTable = useRef(null);

      // componentDidMount
      useEffect(() => {
        // fill columns according to your data
        $(myTable.current).DataTable({
          data: props.data,
          'columns': [
            {title: 'first col'},
            {title: 'second col'},
            {title: 'third col'},
            ....
          ]
        });
      }, []);

      useEffect(() => {
        // componentWillUnmount
        return () => {
          $(myTable.current).DataTable().destroy();
        }
      }, []);

      return (
        <React.Fragment>
          <table className='display' width='100%' ref={myTable}>

          </table>
        </React.Fragment>
      )
    }

    export default CustomDataTable;