javascript - react 组件中的 jQuery

Question

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

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

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

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

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

或者使用 import 和 require 这样的例子:How to add script tag in React/JSX file?

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

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

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

Answer 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 文件中。