反应组件

Question

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

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

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

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

如下例所示：Adding script tag to React/JSX此示例在componentWillMount

中添加脚本标记

或者使用导入和要求，例如：How to add script tag in React/JSX file?

如果没有通过npm安装jQuery，我无法使这些解决方案有效。

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

在这种情况下你推荐什么？什么是性能和用户体验的最佳解决方案？

Answer 1

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

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

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

将包装器放在单独的文件中：

invokeLater

您可以将它作为常规反应组件使用，react-async-component将故意将整个组件加载到单独的.js文件中。