Question

我正在构建一个工具，用于从反应组件中创建登陆页面。

那它是如何运作的：

我有一个简单的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早于虚拟厄运库和框架而已。它于2005年首次构建，受到Dean Edwards早期的cssQuery库的影响，并于2006年由John Resig作为开源JavaScript库发布。已经有成千上万为jQuery库编写的jQuery插件。在2020年，jQuery库仍然是网络上最流行的JavaScript库。 React不是唯一的虚拟dom库，并且与最快最轻的dom相距甚远。但是，它是一个维护良好的图书馆，背后有非常热情的社区。需要注意的重要一点是，因为我们比其他东西更喜欢其他东西，所以这并不意味着我们不应该使用它。为什么要重新发明轮子，而忽略jQuery库精美制作的插件，因为新方法问世了？ jQuery插件使我们能够尊重客户/雇主的预算。使用可用的功能，将其集成到任何回波系统中，无论是Angular，Vue还是 React 。为什么不呢？

这是我与React集成的方式：

节点

要将jQuery包含在Node中，请先安装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"));

JQuery和React一起使用

1 个答案: