JQuery together with React

Question

我正在构建一种工具，以从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);
}

我想将jQuery用于CustomJavaScript-但似乎它不起作用，因为React也使用虚拟DOM。是否有可能控制使用自定义注射JavaScript的按钮？

Answer 1

给在原始问题下评论的人的注释：

jQuery早在Virtual Doom库和框架之前就早就出现了。它是2005年首次建造的，受迪恩·爱德华兹（Dean Edwards）较早的CSSQUERY图书馆的影响，并于2006年由John Resig于2006年发行。为jQuery库编写了成千上万的jQuery插件。在2020年，jQuery库仍然是网络上最受欢迎的JavaScript库。React不是唯一的虚拟DOM库，也不是最快，最轻的。但是，它是一个维护良好的图书馆，背后有非常热情的社区。重要的是要注意的是，由于我们喜欢的东西不仅仅是其他东西，因此并不意味着我们不应该使用它。为什么我们要为jQuery图书馆重新发明轮子并无视精美的插件，因为新的方式出现了？JQuery插件使我们能够尊重客户/雇主的预算。使用可用的内容，将其集成到任何回声系统中，无论是Angular，vue还是 React 。为什么不

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

节点

要在节点中加入jQuery，首先使用npm安装。

npm install jquery

要使jQuery在节点上工作，需要一个带有文档的窗口。由于没有这种窗口在节点中，因此可以通过诸如JSDOM之类的工具来模拟一个窗口。这对于测试目的可能很有用。

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

导入jQuery作为$ jQuery软件包。

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

使用jQuery和Bootstrap与ES6导入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"));