我正在尝试使用在我的主要 React 应用程序(bundle B)中的外部脚本(bundle A) 中公开的 React 组件。
外部 React 'header' 组件（包 A）通过 a 加载<script>并使用 Webpack暴露加载器作为全局窗口变量公开。
然后，我的站点按以下顺序引用这些包：
- React/ReactDOM 包
- 外部标头组件包（包 A）
- 主应用程序包（包 B）
然后可以通过window.appHeaderBundleMain 应用程序（包 B）中引用外部标头组件，例如
在我的主应用程序中，我尝试引用该组件const Header = window.appHeaderBundle.default;，然后render()将其用作普通 jsx <Header />。
这确实开始运行组件代码，但因错误而爆炸：
未捕获的错误：元素 ref 被指定为字符串 (searchForm)，但未设置所有者。您可能加载了多个 React 副本。
我正在尝试做的事情是否可行，如果可以，我该如何让我的组件进行渲染？
编辑：这种方法确实适用于一个只呈现<h1>test</h1>. 使用的ref是什么破东西！
这背后的想法是可以将外部包放入多个站点。更新外部包然后将反映在所有站点中。目前，每个站点都通过 NPM 加载它，但这需要每个站点在进行更改时提高版本号，因此为什么我要采用这种方法。