反应组件中的jQuery

Posted 2023-02-21

【中文标题】反应组件中的jQuery

【英文标题】：jQuery in react component

【发布时间】：2018-05-12 01:17:18

【问题描述】：

我有一个用 react 构建的网络应用程序。在这个应用程序中，我还有一些带有旧版本 jQuery 代码的页面。现在这是在服务器端呈现的，我必须使用自己的导航菜单在脚本标签中使用 jQuery 和 jQuery-UI 代码加载整个 ejs 文件。 （差不多1000行jQuery代码）

这意味着我必须为这些 jQuery 页面构建另一个导航菜单。

我想在我的“内容 div”中呈现这个 jQuery 依赖的代码，这样我仍然可以使用使用反应路由器的反应菜单。我想把它渲染成一个组件。但我不知道这是否是最好的解决方案。

我已经阅读了很多关于如何做到这一点的示例，但我不知道该选择哪一个，我一直在努力让它们发挥作用

如本例所示：Adding script tag to React/JSX 本例在componentWillMount中添加脚本标签

或者使用 import 和 require 像这个例子：How to add script tag in React/JSX file?

如果不通过 npm 安装 jQuery，我无法使这些解决方案正常工作。

我还没有通过 npm 安装 jQuery，因为我知道这会影响应用程序其余部分的包大小，并且我只在几个页面中使用 jQuery。用户真的不需要为应用程序的其余部分加载 jQuery

在这种情况下，您有什么建议？性能和用户体验的最佳解决方案是什么？

【问题讨论】：

您是否需要与这些 jQuery 依赖的页面进行双向通信？如果没有，为什么不把它们去掉一点，然后通过 iframe 加载它们。可能不是最高效的解决方案，但它是最简单的。

我需要使用 react 应用程序中的一些全局变量，但输出通过 ajax 和用 node.js 编写的 API-endpoints 存储在数据库中

如果我们还在使用iframe的想法，可以考虑使用developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

这里有一个很好的使用教程robertnyman.com/html5/postMessage/postMessage.html

谢谢。我也想看看其他解决方案。我怀疑使用 iframe 可能会占用大量资源

【参考方案1】：

看看react-async-component。您的组件可能类似于：

// SomethingWithJquery.js
import React, Component from 'react'
import $ from 'jquery'

class SomethingWithJquery extends Component 

  constructor(props) 
    super(props)
  

  render() 
    // ... as much jquery mess as you need
  



export default SomethingWithJquery

并在单独的文件中包装：

// SomethingWithJquery.async.js
import  asyncComponent  from 'react-async-component';

export default asyncComponent(
  resolve: () => System.import('./SomethingWithJquery')
);

你可以将它用作常规的 react 组件，react-async-component 会在后台故意将整个组件加载到单独的 .js 文件中。

【讨论】：

看起来很有希望，但是你导入 jQuery 的方式意味着我必须通过 npm 安装 jQuery，这意味着 jQuery 真的会影响我的捆绑文件吗？

@Koiski 据我所知不，它应该添加 jquery 以将块与组件分开。所以只有当用户打开一个包含这个异步组件的页面时才会加载 jquery。

使用这种方法，我担心使用 jQuery 直接操作 DOM 会搞砸虚拟 DOM 反应的工作。对此有何见解？