在 single-spa 中使用 Utility 模块渲染 UI答案

【问题标题】：Rendering UI with Utility module in single-spa在 single-spa 中使用 Utility 模块渲染 UI
【发布时间】：2022-12-21 05:37:36
【问题描述】：

我正在尝试使用浏览器内实用程序模块呈现 UI 组件单温泉，这是我使用 create-single-spa 命令创建的，并选择了浏览器内模块选项。由于没有“单水疗反应" 库带有浏览器内实用模块，它有助于将元素渲染为 dom，我们如何实现渲染 UI 元素，如段落、锚点、div标签等。在文档中提到浏览器内的实用程序模块可能会或可能不会呈现 ui 元素。文档链接是https://single-spa.js.org/docs/module-types。任何有关如何实现这一目标的意见都将受到赞赏。

提前致谢！！

【问题讨论】：

标签： javascript reactjs micro-frontend single-spa

【解决方案1】：

在技术层面上，实用程序模块与应用程序并没有什么不同。不同之处在于应用程序导出单水疗生命周期，而实用程序模块通常不会。然而，这并不意味着实用模块不能使用像 React 这样的框架。对于某些微服务来说，这是一个非常有用的模式，例如所有其他微前端使用的“通知服务”模块，并且（可能）会向用户显示。 single-spa-react 对于这个模块来说不是必需的，因为这个助手只是生成应用程序所需的生命周期函数。从这个模块的入口文件中导出的是它的公共 API。此时您的选择是：

将react、react-dom和相关库（例如webpack-config-single-spa-react）添加到实用程序模块
使用 create-single-spa 创建 React 应用程序，然后删除对 single-spa-react 的引用

之后，您将使用普通的 ReactDOM.render 挂载一个容器，该容器将用于呈现该微服务负责的任何 UI。我会使用在根配置布局（即ReactDOM.render(App, document.getElementById('notification-root'))）中定义的现有 DOM 元素，但有不止一种方法可以解决这个问题，例如使用 React Portals，甚至不使用 React！使用 vanilla JavaScript 实现同样简单；任何 Web 框架都只是提供熟悉度和更简单的 DOM 操作，仅此而已。

【讨论】：

我尝试使用 ReactDom.render() 渲染元素，并且还添加了 @babel/preset-react 库。尝试运行此实用程序模块时，我没有收到任何错误，但没有向 dom 呈现任何内容。我在 microfrontendlayout.html 中添加了一个 ID 为“style”的 div 标签，并在 ReactDOM.render(<h1>Hello</h1>, document.getElementById("style")) 中使用它。
解决了！问题是，我试图在 root-config 定义布局之前渲染到 dom。谢谢！