Jquery Ui 在 React 功能组件中不起作用

Question

我想在 React 中实现 Resizable using Jquery UI.

我有这样的代码..

import $ from 'jquery';
import 'jquery-ui'; 

...
...

useEffect(() => {
    $(function () {
      $(".resizable").resizable();
    });
  }, [])

...
...

<div className="resizable" >Test</div>

我没有收到错误 但是可调整大小不起作用...

我想要这样的成就jqueryui.com/resizable

Answer 1

试试这个

首先，安装jquery-ui-bundle

npm install jquery-ui-bundle --save

然后，

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.css';

...
...
const ref = useRef();

useEffect(() => {
    $(function () {
      $(ref.current).resizable();
    });
  }, [ref.current]);

...
...

<div className="resizable" ref={ref}>Test</div>

在使用 jquery-ui 进行一些谷歌搜索后，我发现我们可以导入单个小部件（可能 quite 很麻烦）或者安装 jquery-ui-bundle 并仅导入一次。