TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).select2 is not a function

Question

我想在我的 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>
)
}

Answer 1

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

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

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

TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).select2 is not a function

TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).select2 is not a function

javascript

reactjs

mern