反应“ dangerouslySetInnerHTML”会在状态更改时导致“不是孩子”错误

Question

I have a site which allows users to write content in BBCode and then parses the BBCode to HTML for rendering on the site. I am converting part of the site to use React. As far as I know, the only way of rendering raw content in React is to use dangerouslySetInnerHTML={ { __html: someHtmlString } } on a child element.

When I use this method, however, I get errors when removing the node with dangerouslySetInnerHTML or modifying any of its neighbors. The errors are either The node before which the new node is to be inserted is not a child of this node or The node to be removed is not a child of this node .

The Node in question that is not a child of some other node appears to be the <span> tag on which I am "dangerously setting innerHTML", as I inspected it in the debugger and its child nodes are the rendered BBCode.

Is there a reason why the DOM hierarchy is getting corrupted like this? Do I need to do a multi-stage update when removing this node to first set its innerHTML to null, then re-render, then remove the node itself?

Answer 1

I believe I found the cause of this...I can't be positive this was the cause, but changing it fixed the issue.

The rendered BBCode appears to have contained elements that are not valid children of a <span> , so when the innerHTML was set, the node somehow just got removed from the DOM hierarchy (even though it rendered completely fine in the browser, with the BBCode content and everything).

I restructured the component to set the innerHTML of the parent <div> (where the editing controls would show up) when not editing, and instead render an identical <div> with the editing contents when the component was in edit mode.