时间戳

首页 > 解决方案 > 如何将多个 Create React App (CRA) 构建添加到 SharePoint 页面？

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

问题描述

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

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

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

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

任何建议表示赞赏。

非常恭敬，

标签： reactjssharepointcreate-react-app

解决方案

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

  1. 在 package.json 中确保“名称”字段是唯一的。此外，请确保您将“主页”变量设置为您打算复制构建 index.html 文件的位置。

  2. 在 index.js 中，将 document.getElementById 设置为一个唯一的名称，该名称不会被同一页面上存在的其他 React 项目使用。

  3. 在 index.html 中，确保用于根 div 的名称与上面步骤 2 中使用的名称相同。

  4. 在 manifest.json 中，为您的 App 提供一个短名称和名称。这一步似乎不是强制性的，但我这样做是为了在我的项目中保持一致性。

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

推荐阅读