如何将多个 Create React App (CRA) 构建添加到 SharePoint 页面？答案

【问题标题】：How do I add more than one Create React App (CRA) build to a SharePoint page?如何将多个 Create React App (CRA) 构建添加到 SharePoint 页面？
【发布时间】：2021-04-26 22:35:18
【问题描述】：

我从 Vue 转向了 React，我喜欢使用 CRA 工具在 SharePoint 上制作界面。我的常规方法包括构建应用程序并将构建 index.html 文件链接到 SharePoint 内容编辑器 Web 部件 (CEWP)。

我最近需要在同一页面上创建两个 CRA 构建，但我遇到了一个问题，即一个构建对 DOM 的控制会覆盖页面上另一个构建的内容。

现在我的理解是多个 CRA 不能存在于同一页面上。我不想弹出我的应用程序。在我的研究中，似乎 webpack 将 this["jsonpFunction...] 分配给这两个应用程序。我阅读的一个建议涉及在其中一个应用程序中查找和替换 this 的所有实例并将其更改为 "window.jsonpFunction... “。我也无法正常工作。

我想继续使用 CRA 并将构建的 index.html 链接到同一页面上的不同 Web 部件。

任何建议表示赞赏。

非常尊重，

【问题讨论】：

标签： reactjs sharepoint create-react-app

【解决方案1】：

我通过执行以下操作解决了我的 SharePoint 本地问题，其中多个 React 构建在单独的 Web 部件中工作。

在 package.json 中确保“name”字段是唯一的。此外，请确保您将“主页”变量设置为要复制构建 index.html 文件的位置。
在 index.js 中，将 document.getElementById 设置为一个唯一的名称，该名称不会被同一页面上存在的其他 React 项目使用。
在 index.html 中，确保用于根 div 的名称与上面第 2 步中使用的名称相同。
在 manifest.json 中，为您的应用提供一个短名称和名称。这一步似乎不是强制性的，但我这样做是为了在我的项目中保持一致。

现在您可以构建并复制到 SharePoint。我使用内容编辑器 Web 部件，每个部件都指向应用程序的适用 index.html 文件。效果很好！

【讨论】：