JQuery 与 React 一起使用答案

【问题标题】：JQuery together with ReactJQuery 与 React 一起使用
【发布时间】：2017-04-09 01:07:23
【问题描述】：

我正在构建一个工具来使用 react 组件创建登录页面。

那么它是如何工作的：

我有一个简单的 API - React 加载配置并相应地显示组件。

由于此工具将用于 A/B 测试（快速生成一些登录页面并测试哪个有效），我需要一个库，它还能够在 React 渲染后操作 DOM。

这段代码注入了一些javascript：

if (template.customJavascript) {
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.innerHTML = template.customJavascript;
  script.async = true;
  document.body.appendChild(script);
}

我想为 customJavascript 使用 jQuery - 但它似乎不起作用，因为 React 也使用虚拟 DOM。是否有可能控制例如单击带有自定义注入 JavaScript 的按钮？

【问题讨论】：

嘿@Fabian！所以，我认为我没有正确回答您的问题……您为什么需要 jQ？您实际上可以使用 React 使用状态来操作 DOM，您还可以使用事件处理程序和其他东西。几乎你用 jQ 做的所有与 DOM 操作相关的事情，你也可以用 React 做。
尽量不要在 React 中使用 jQuery 并在 React 渲染后操作 DOM。
实际上有点难以解释 :) 你知道这个工具 otpimizely (optimizely.com)。我们在这里构建类似的东西。所以我们有一个后端，我们可以在其中选择组件——这些组件将在反应中呈现。为了使这些块工作（业务逻辑），我需要注入一些 javascript - 因为这可能非常多变。如果你看看optimizely.com，你希望能理解它:)（抱歉我的解释不好）

标签： javascript jquery reactjs

【解决方案1】：

给在原始问题下发表评论的人的说明：

jQuery 早在虚拟厄运库和框架出现之前就已经存在了。它于 2005 年首次构建，受到 Dean Edwards 早期 cssQuery 库的影响，并于 2006 年由 John Resig 作为开源 JavaScript 库发布。已经有数以万计的 jQuery 插件为 jQuery 库编写。 2020 年，jQuery 库仍然是网络上最流行的 JavaScript 库。 React 不是唯一的虚拟 dom 库，距离最快和最轻的库还很远。然而，它是一个维护良好的图书馆，背后有非常热情的社区。需要注意的重要一点是，因为我们喜欢某物多于其他东西，并不意味着我们不应该使用它。为什么我们要重新发明轮子并忽视为 jQuery 库制作精美的插件，因为新方式出现了？ jQuery 插件允许我们尊重客户/雇主的预算。使用可用的东西，集成到任何回声系统中，无论是 Angular、Vue 还是 React。为什么不呢？

这是我对如何与 React 集成的看法：

节点

要在 Node 中包含 jQuery，首先使用 npm 安装。

npm install jquery

要让 jQuery 在 Node 中工作，需要一个带有文档的窗口。由于 Node 中不存在这样的窗口，因此可以通过 jsdom 等工具来模拟。这对于测试目的很有用。

require("jsdom").env("", function(err, window) {
     if (err) {
         console.error(err);
         return;
     }

     var $ = require("jquery")(window);
});

将 jQuery 作为 jQuery 包的 $ 导入。

如果您不熟悉 ES6 导入/导出语法，请使用下面的链接查看 StackOverflow 上的问题和答案。

Using Jquery and Bootstrap with Es6 Import for React App

现在您可以在您的生命周期方法中通过 $ 符号选择 DOM，并在 jQuery 库的帮助下包含、扩展或开发插件。注意：应该先加载标记，这就是为什么我在 componentDidMount() 方法中使用 jquery 代码。

import React, { Component } from "react";
import {render } from "react-dom";
import $ from "jquery"
import PluginName from 'jQueryPluginExample'

class App extends Component {
   componentDidMount() {
         $('.element').jQueryPluginExample({

             plugin_object_hook_1:custom_value,
             plugin_object_hook_2:functio(){
                // custom functionality
             }
         })
   }
   render(){
     return (
        // ... App markups
     );
   }
}

render (<App />, document.detElementById("root"));

【讨论】：