Javascript TypeError:jquery\uu网页包\u导入的\u模块\u 1\uuuuuu默认值（…）（…）。select2不是函数

我想在react js web应用程序中使用select2 jquery库

我正在index.html页面中导入jquery

<script type="text/javascript" src="%PUBLIC_URL%/assets/js/select2.min.js"></script>

这里选择2.js组件

 import React,{useState ,useEffect,useRef, Component} from 'react';
 import $ from 'jquery';

export default class select2 extends Component
{
   
    componentDidMount() {
        $(this.refskills).select2();
      }  
    render() {
        return (
        <select className="multiple-skils" 
                name="datajobskills" 
                multiple="multipleskils"
                ref ='refskills'>
            <option value="1">HTML</option>
            <option value="2">JS</option>
            <option value="3">CSS</option>
        </select>
        );
    }
      
}

import React,{useState ,useEffect,useRef} from 'react';
import axios from 'axios';
import $ from 'jquery';
import Tags from '../services/select2'

const Dashboardcomponent = (props) =>
{ return (
    <div>
<select2></select2>
</div>
)
}

import React，{useState，useffect，useRef，Component}从'React'导入；
从“jquery”导入美元；
导出默认类select2扩展组件
{
componentDidMount（）{
$（this.refskills）。选择2（）；
}  
render（）{
返回(
HTML
JS
CSS
);
}
}

我使用的是importselect2组件

 import React,{useState ,useEffect,useRef, Component} from 'react';
 import $ from 'jquery';

export default class select2 extends Component
{
   
    componentDidMount() {
        $(this.refskills).select2();
      }  
    render() {
        return (
        <select className="multiple-skils" 
                name="datajobskills" 
                multiple="multipleskils"
                ref ='refskills'>
            <option value="1">HTML</option>
            <option value="2">JS</option>
            <option value="3">CSS</option>
        </select>
        );
    }
      
}

import React,{useState ,useEffect,useRef} from 'react';
import axios from 'axios';
import $ from 'jquery';
import Tags from '../services/select2'

const Dashboardcomponent = (props) =>
{ return (
    <div>
<select2></select2>
</div>
)
}

import React，{useState，useffect，useRef}来自'React'；
从“axios”导入axios；
从“jquery”导入美元；
从“../services/select2”导入标记
常量仪表板组件=（道具）=>
{返回(
)
}

像其他人在评论中建议的那样，将jQuery与React一起使用不是最佳做法，因为jQuery直接操纵DOM，而React不知道这些更改。React只知道它自己在虚拟DOM中对DOM的表示，因此最好避免将它们一起使用。如果您愿意，您可以查看这个软件包

react select

（），它几乎可以做您想做的事情，但以react的方式做

话虽如此，如果您需要解决方案工作，您可以将其作为全局脚本添加到

index.html

中，而不是使用

jquery

包并将其导入

仪表板组件

，就像您使用

select2

脚本一样。然后您可以在

componentDidMount

method-

窗口中这样使用它。$（“.multiple skills”）。选择2（）

下面是一个工作示例-
首先，如果要使用，必须避免在react中使用jquery库，然后必须使用jquery访问器，如$（“#someIDHere”）我们应该在react js中使用jquery插件还是始终使用npm包？jquery与react是不同的库，因此您应该一次尝试其中一个，如果您使用react js，那么对于帮助，您可以使用npmare中react js可用的任何其他模块。您是否使用
webpack
捆绑您的代码？是的，我使用webpack。。。请提供任何解决方案您是否将jquery添加到index.html？就像这里-它显示错误
TypeError:window.$不是一个函数
，但我使用setTimeout函数，然后它就工作了，现在我将组件转换为功能组件，并使用脚本，现在它工作了。。谢谢@ultimoTG