如何在 React 组件中使用 jquery 脚本？答案

【问题标题】：How to make use of jquery script in react component?如何在 React 组件中使用 jquery 脚本？
【发布时间】：2017-06-07 06:53:04
【问题描述】：

<script>
    $(document).ready(function() {
        var source;
        var destination;
        var fn = function(event, ui) {
            toDrop = $(ui.draggable).clone();
            if ($("#droppable").find("li[uniqueIdentity=" + toDrop.attr("uniqueIdentity") + "]").length <= 0) {
                $("#droppable").append(toDrop);
            }
            else
                return false;
        };
        $("#draggable li").draggable({
            helper: 'clone'
        });
        $("#droppable").droppable({ drop: fn });
    });
</script>

我通过在 html 中使用这个 jquuey 来使用拖放功能，它可以正常工作如何在反应组件中使用它。

【问题讨论】：

你不需要混合jquery和React，你可以使用npm包github.com/react-dnd/react-dnd
正如上面一位朋友所说，您不应该将 react 与 Jquery 混合使用。没有必要，而是搜索 3d 部分 npm 库来处理。

标签： jquery html reactjs drag-and-drop draggable

【解决方案1】：

你可以将 npm 依赖导入为

npm install jquery

然后在您的组件中，您可以将其导入为

import $ from "jquery"

然后您可以使用 $ as $(document).ready(function() {)}; 编写代码；

这是 npm https://github.com/reactjs/react-rails/issues/209 中 jquery 的解决方法

【讨论】：