在 React 中使用 jquery 并获取 jquery_1.default(...).resizable is not a function答案

【问题标题】：use jquery in React and get jquery_1.default(...).resizable is not a function在 React 中使用 jquery 并获取 jquery_1.default(...).resizable is not a function
【发布时间】：2021-05-11 15:31:20
【问题描述】：

我正在使用带有 React 的 jquery。当我想使用 $(.myclass).resizable() 时。我收到一个错误：use jquery in React and get jquery_1.default(...).resizable is not a function。

这里是演示： https://stackblitz.com/edit/react-modal-rnd-2?file=rnd.js

import React from 'react';
import { render } from 'react-dom';
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import $ from 'jquery';

export default class RND extends React.Component {
  constructor() {
    super();

    $('.modal-content').resizable({
      //alsoResize: ".modal-dialog",
      minHeight: 300,
      minWidth: 300
    });
    $('.modal-dialog').draggable();

    $('#myModal').on('show.bs.modal', function() {
      $(this)
        .find('.modal-body')
        .css({
          'max-height': '100%'
        });
    });
  }

  modalClose = () => {
    this.setState({
      modalShow: false
    });
  };

  onStart = () => {
    console.log('here');
  };

  render() {
    return (
      <Modal
        isOpen={this.state.showModal}
        toggle={() => {
          this.setState({ showModal: false });
          this.modalClose();
        }}
        style={{
          minWidth: '30rem',
          border: '0.1rem solid green'
        }}
      >
        <ModalHeader
          className="modal-header bg-primary modal-title text-white"
          toggle={() => {
            this.setState({ showModal: false });
            this.modalClose();
          }}
        >
          <h2> Header </h2>
        </ModalHeader>
        <ModalBody>
          <div className="form-group row">
            <div className="FormRow col-sm-12">
              <span>Body data </span>
            </div>
          </div>
        </ModalBody>
      </Modal>
    );
  }
}

我想要的是使弹出模式可调整大小和可拖动。如果有一种方法可以在没有 jquery 的情况下实现它，它也适用于我。

【问题讨论】：

标签： javascript jquery reactjs jquery-ui-resizable

【解决方案1】：

我找到了解决方案。第1步： npm i jquery-ui

第二步：在 jsx 文件中添加这些源

import 'jquery-ui/themes/base/resizable.css';
import 'jquery-ui/themes/base/draggable.css';

require('jquery-ui/ui/version');
require('jquery-ui/ui/plugin');
require('jquery-ui/ui/widget');
require('jquery-ui/ui/widgets/mouse');
require('jquery-ui/ui/widgets/resizable');
require('jquery-ui/ui/widgets/draggable');

然后就可以使用jquery-ui函数了。

【讨论】：