Javascript ReactJS中的JQuery:TypeError:JQuery\uuuuu WEBPACK\u IMPORTED\u MODULE\u 18\uuuuuuuuuu default（…）（…）。sortable不是函数

我正在尝试在react中实现JQuery，以便对ReacJS中的（组件）进行排序（拖动）

我犯了以下错误：

类型错误： jquery_uu网页包_u导入的_u模块_u18_uuuu默认值（…）（…）。不支持排序 函数

我很抱歉，我试图解决这个问题，但没有任何帮助。 请帮我纠正一下

我的代码如下：

index.html

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

AllComponets.js

import React from "react";
import Widget1 from "./Widget1";
import Widget2 from "./Widget2";
import Widget3 from "./Widget3";
import Component5 from "./Component5";
import $ from "jquery";

export default class  AllComponents extends React.Component {
  componentDidMount() {
    $(function () {
      $("#sortable").sortable({
        revert: true,
      });
    });
  }
  render() {
    return (
      <div>
        <div id="sortable">
          <Component5 />
          <Widget1 />
          <Widget2 />
          <Widget3 />
         </div>
        </div>
    );
  }
}

从“React”导入React；
从“/Widget1”导入Widget1；
从“/Widget2”导入Widget2；
从“/Widget3”导入Widget3；
从“/Component5”导入组件5；
从“jquery”导入$；
导出默认类AllComponents扩展React.Component{
componentDidMount（）{
$（函数（）{
$（“#可排序”）。可排序({
回复：对，
});
});
}
render（）{
返回(
);
}
}

这对我很有用-

安装

npm i jquery ui捆绑包

并添加您的组件

import $ from 'jquery';
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.min.css';

这可能对你有帮助这有帮助吗？