卡住试图在 Umbraco 的原始 HTML 中水合 ReactJS.net SSR 组件

Question

我有一个使用 ReactJS.net 松散工作的 Umbraco CMS。我有一个根<App> 组件，它采用（Umbraco 节点 ID 和路径）对象的数组prop，用于使用<Content> 组合为站点中的每个页面生成<Route>。 <App> 在 UmbracoViewPage 中呈现，并在客户端浏览器中呈现良好 - 使用 @Html.ReactInitJavaScript()，它会按预期得到水合。

<Content> 组件使用dangerouslySetInnerHTML 加载页面 HTML。我有一些自定义 Umbraco 网格编辑器，它们不是在 ASP .NET 视图中生成常规标记，而是调用 @Html.React() 来呈现自定义 React 组件，这可能需要一个或两个 prop。

在初始页面加载时，网格 HTML 是在服务器端生成的，这些嵌套组件在浏览器中工作正常，因为 ReactJS.net 正在为每个网格组件传递 ReactDOM.hydrate() 调用（由 @Html.ReactInitJavaScript() 触发）。

但是一旦前端路由发生变化，<App> 就会根据路径安装相关的<Content> 组合，这会调用带有 Umbraco 节点 ID 的 Umbraco SurfaceController。该节点的页面网格 HTML 像以前一样使用 dangerouslySetInnerHTML 返回和加载。

问题是我现在有原始 HTML，其中包含多个需要补水的 React 组件。因为它是在浏览器中加载的，所以不再有一个 @Html.ReactInitJavaScript() 调用单独为所有组件补水。

我怎样才能做到这一点？

Answer 1

注意：回答我自己的问题，以防它帮助任何正在使用 Umbraco 和 React 并旨在实现更紧密集成的人。

TL;DR - 在我的内容 API 响应中包含组件名称、React ID 和道具列表，让我的前端代码能够像 ReactJS.NET 的 @Html.ReactInitJavaScript 帮助程序一样处理它（我认为）。

我的解决方案是修改我的SurfaceController 以包含在标记中呈现的所有 React 组件的列表。所以它与 ReactJS.NET 的 @Html.ReactInitJavaScript 帮助器非常相似，但在我的 SurfaceController API 方法中。

我扩展了 ReactJS.NET 的 @Html.React 帮助器，以便将有关被调用组件的详细信息也添加到我命名为 ReactComponentHydrator 的自定义帮助器服务中（gist，每个请求的单例）*。对于每个组件，我存储组件名称（例如Component.ExampleComponent）、包含在 HTML 标记中的 React ID（例如 react_d1gC4eKqaUatZWfAdtjkTA）以及随它发送的道具。

由此，在通过dangerouslySetInnerHTML 加载 HTML 后，我将在前端代码中创建和 hydrate 每个组件。

*ReactJS.NET does seem to keep track of each component called 但这是内部的，不会通过我能找到的任何 API 公开。