反应组件中的jQuery

Question

我有一个建立反应的网络应用程序.在这个应用程序中,我也有一些页面与旧版本的jQuery代码.现在这是渲染服务器端,我必须ejs用脚本标签中的jQuery和jQuery-UI代码加载整个文件,并使用自己的导航菜单.(差不多1000行的jQuery代码)

这意味着我必须为这些jQuery页面构建另一个nav-menu.

我想在我的"内容div"中渲染这个jQuery依赖代码,所以我仍然可以使用使用react路由器的react菜单.我想把它渲染成一个组件.但我不知道这是否是最佳解决方案.

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

如下例所示:将脚本标记添加到React/JSX此示例在componentWillMount中添加脚本标记

或者使用import和require这样的示例:如何在React/JSX文件中添加脚本标记？

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

我还没有通过npm安装jQuery,因为我知道这会影响我的应用程序其余部分的bundle大小,而我只在几个页面上使用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-async-component将故意将整个组件加载到单独的.js文件中.