如何将 jquery 插件集成到 react 功能组件中

Question

我正在使用带有反应钩子的功能性反应组件开发应用程序。 我按照以下代码将 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 命令。

Answer 1

@stminion001 钩子允许我们实现这个功能。 您可以使用这种方法集成 datatables.net。 在依赖项中添加包： npm install 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;