时间戳

首页 > 解决方案 > 一种动态加载 react 组件并避免多个 react 副本的方法

reactjs - 一种动态加载 react 组件并避免多个 react 副本的方法

问题描述

我们有一个以bundle.js文件形式捆绑的反应应用程序（单页应用程序）。捆绑包包含在主 html 文件中，如下所示：

<body>
  ...
  <script src="bundle.js"></script>
</body>

bundle.js文件是由 webpack 创建的。

我们希望以另一个 .js 文件的形式为该应用程序提供模块（反应组件），但这些模块应该完全独立于主包，因此它们应该单独构建并且仅在客户需要时才包含在内。

我想出了以下解决方案：

每个模块（react 组件）都是用它自己的 webpack 配置构建的，结果是这个代码的缩小版本：

import MyModule from './MyModule'
window.MyModule = MyModule;
export default MyModule;

然后我们通过主 html 文件将其导入到主应用程序中：

<body>
  ...
  <script src="MyModule.js"></script>
  <script src="bundle.js"></script>
</body>

在bundle.js中有一个部分用于获取应用程序配置，如果有信息表明应该加载 MyModule，它的加载方式如下：

let myModuleComponent = React.createElement(window.MyModule, someProps);

结果是，组件加载良好，但随后出现错误

addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。您可能正在向未在组件的 render 方法中创建的组件添加 ref，或者您加载了多个 React 副本

这并不奇怪，因为 MyModule 扩展了 React.Component，因此在MyModule.js文件中包含了整个反应库。

我还尝试通过将反应库设置为外部来调整 MyModule 的 webpack.config.js：

externals: {
  // Use external version of React
  "react": "react",
  "react-dom": "react-dom"
}

但随后MyModule.js根本不会加载错误：Cannot read properties of undefined (reading 'Component')

有谁知道如何实现这一目标？感谢您的任何建议。

标签： reactjswebpackdynamiccomponentsexternal

解决方案

推荐阅读