通过 dangerouslySetInnerHTML 注入 React 门户和 HTML
React portals and HTML injected through dangerouslySetInnerHTML
我有一个应用程序，用户可以在其中接收来自管理员的消息。管理员在管理员面板的所见即所得编辑器中创建消息，消息在数据库中存储为 html 字符串，然后消息内容通过 dangerouslySetInnerHTML 注入组件。 HTML 消息中的内容已清理，因此只有允许的标签和属性（没有脚本标签、标签上没有事件处理程序方法等）。
一切正常，但现在我们必须向消息编辑器添加“表单”功能。表单在管理面板的单独选项卡中创建，然后它们可以附加到消息中。在消息中它看起来像这样。
<div data-form-id="12"/>
空 div 表单 ID。现在，当消息显示在用户的应用程序上时，我应该处理这种 div 并将它们替换为从数据库中获取的预期表单（表单未存储为 html，它们按指定存储 json 结构).
首先我想到了使用 React Portals，但读到它们应该用于修改外部 HTML 元素而不是 React 应用程序内部的元素，并且在内部使用它们是不好的做法。
有一些“正确”的方法可以实现这样的目标，还是从一开始就是个坏主意？
should be used to modify external HTML elements rather than those inside React app
不完全正确。当你想在反应树之外的某个地方渲染反应树的元素时，使用反应门户（意思是，进入不受反应控制的 DOM ）。而用 dangerouslySetInnerHTML 设置的 DOM 元素不受 React 控制。我认为您的解决方案在特定情况下是可以的。在删除“消息”之前，您绝对应该小心并删除门户网站，这样 React 就不会尝试将某些内容渲染到 null，否则它应该可以工作。
我有一个应用程序，用户可以在其中接收来自管理员的消息。管理员在管理员面板的所见即所得编辑器中创建消息，消息在数据库中存储为 html 字符串，然后消息内容通过 dangerouslySetInnerHTML 注入组件。 HTML 消息中的内容已清理，因此只有允许的标签和属性（没有脚本标签、标签上没有事件处理程序方法等）。
一切正常，但现在我们必须向消息编辑器添加“表单”功能。表单在管理面板的单独选项卡中创建，然后它们可以附加到消息中。在消息中它看起来像这样。
<div data-form-id="12"/>
空 div 表单 ID。现在，当消息显示在用户的应用程序上时，我应该处理这种 div 并将它们替换为从数据库中获取的预期表单（表单未存储为 html，它们按指定存储 json 结构).
首先我想到了使用 React Portals，但读到它们应该用于修改外部 HTML 元素而不是 React 应用程序内部的元素，并且在内部使用它们是不好的做法。
有一些“正确”的方法可以实现这样的目标，还是从一开始就是个坏主意？
should be used to modify external HTML elements rather than those inside React app
不完全正确。当你想在反应树之外的某个地方渲染反应树的元素时，使用反应门户（意思是，进入不受反应控制的 DOM ）。而用 dangerouslySetInnerHTML 设置的 DOM 元素不受 React 控制。我认为您的解决方案在特定情况下是可以的。在删除“消息”之前，您绝对应该小心并删除门户网站，这样 React 就不会尝试将某些内容渲染到 null，否则它应该可以工作。