React“dangerouslySetInnerHTML”会导致状态更改中出现“not child”错误

Question

我有一个网站，允许用户在BBCode中编写内容，然后将BBCode解析为HTML以便在网站上呈现。我正在转换网站的一部分以使用React。据我所知，在React中渲染原始内容的唯一方法是在子元素上使用dangerouslySetInnerHTML={ { __html: someHtmlString } }。

但是，当我使用此方法时，在使用dangerouslySetInnerHTML删除节点或修改其任何邻居时出现错误。错误可能是The node before which the new node is to be inserted is not a child of this node或The node to be removed is not a child of this node。

有问题的节点不是某个其他节点的子节点，似乎是我在“危险地设置innerHTML”的<span>标签，因为我在调试器中检查它并且其子节点是渲染的BB代码。

DOM层次结构是否会像这样被破坏？删除此节点时，是否需要进行多阶段更新，首先将其innerHTML设置为null，然后重新渲染，然后删除节点本身？

Answer 1

我相信我找到了原因...我不能肯定这是原因，但改变它解决了这个问题。

渲染的BBCode似乎包含的元素不是<span>的有效子元素，因此在设置innerHTML时，节点以某种方式从DOM层次结构中删除（即使它已呈现在浏览器中完全没问题，包括BBCode内容和所有内容。

我重组了组件，以便在不编辑时设置父innerHTML的{​​{1}}（编辑控件会显示的位置），而是使用编辑内容呈现相同的<div>当组件处于编辑模式时。