1

我有应用程序，用户可以在其中接收来自管理员的消息。管理员在管理员面板上的 WYSIWYG 编辑器中创建消息，消息以 html 字符串的形式存储在 DB 中，然后通过危险的 SetInnerHTML 将消息的内容注入到组件中。消息中的 HTML 已被清理，因此只有允许的标签和属性（没有脚本标签，标签上没有事件处理程序方法等）。

一切正常，但现在我们必须向消息编辑器添加“表单”功能。表单在管理员面板上的单独选项卡中创建，然后可以附加到消息中。在消息中它看起来像这样。

<div data-form-id="12"/>

带有表单 ID 的空 div。现在，当消息显示在用户的应用程序上时，我应该处理这种 div 并用从 db 获取的预期表单替换它们（表单不存储为 html，它们存储为指定的 json 结构）。

首先，我考虑使用 React Portal，但读到它们应该用于修改外部 HTML 元素而不是 React 应用程序内部的元素，并且在内部使用它们是不好的做法。

有一些“正确”的方法可以实现这样的目标，还是从一开始就是个坏主意？

4

1 回答 1

1

应该用于修改外部 HTML 元素而不是 React 应用程序内部的元素

这并不完全正确。当您想要在反应树之外的某处渲染反应树的元素时使用反应门户（意思是，进入不受反应控制的 DOM）。并且设置的 DOM 元素dangerouslySetInnerHTML不受 React 控制。我认为您的解决方案在特定情况下是可以的。在删除“消息”之前，您绝对应该小心并删除门户，因此 React 不会尝试将某些内容渲染到null.，否则它应该可以工作。

于 2021-03-14T19:41:14.453 回答