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