TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).select2 不是 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 表示，因此最好避免將它們一起使用。 如果你願意，你可以看看這個 package react-select ( https://react-select.com/home ) 它幾乎可以做你想做的事情，但以反應的方式做事。

話雖如此，如果您需要您的解決方案工作，而不是使用jquery package 並將其導入DashboardComponent ，您可以將其作為全局腳本添加到您的index.html - 就像您對select2腳本所做的那樣。 然后你可以像這樣在你的componentDidMount方法中使用它 - window.$(".multiple-skils").select2();

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