类型错误：jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).select2 不是函数答案

【问题标题】：TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).select2 is not a function类型错误：jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).select2 不是函数
【发布时间】：2021-01-06 19:45:47
【问题描述】：

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

我在 index.html 页面中导入 jquery

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

这里是 select2.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 select2 组件

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

【问题讨论】：

首先你必须避免在react中使用jquery库，如果你想使用那么你必须使用jquery访问器，比如$('#someIDHere')
我们应该使用 jquery 插件还是在 react js 中始终使用 npm 包？
jquery 与 React 是不同的库，因此您应该一次尝试其中一个，如果您使用的是 React js，那么对于帮助程序，您可以使用 npm 中 Reactjs 可用的任何其他模块
您是否使用webpack 来捆绑您的代码？
是的，我正在使用 webpack ...请提供任何解决方案

标签： javascript reactjs mern

【解决方案1】：

就像其他人在 cmets 中建议的那样，将 jQuery 与 React 一起使用并不是最佳实践，因为 jQuery 直接操作 DOM，而 React 不知道这些变化。 React 只知道它自己在虚拟 DOM 中的 DOM 表示，因此最好避免将它们一起使用。如果你愿意，你可以看看这个包react-select(https://react-select.com/home)，它几乎可以满足你的需求，但以一种反应的方式做事。

话虽如此，如果您需要解决方案工作，您可以将其作为全局脚本添加到您的 @ 中，而不是使用 jquery 包并将其导入 DashboardComponent 987654327@ - 就像你对select2 脚本所做的一样。然后你可以在你的 componentDidMount 方法中使用它 - window.$(".multiple-skils").select2();

这是一个工作示例 - https://codesandbox.io/s/cool-greider-koezs?file=/src/select2.js:120-158

【讨论】：

您是否将 jquery 添加到您的 index.html 中？喜欢这里 - codesandbox.io/s/cool-greider-koezs?file=/public/…
它显示错误 TypeError: window.$ is not a function 但我使用 setTimeout 函数然后它工作正常
现在我将组件转换为功能组件并将脚本放入 useEffect 现在它可以工作了......谢谢@ultimoTG