React.js：获取“无法在'Node'上执行'removeChild'：要删除的节点不是该节点的子节点。”答案

【问题标题】：React.js: Getting "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."React.js：获取“无法在'Node'上执行'removeChild'：要删除的节点不是该节点的子节点。”
【发布时间】：2020-06-13 19:59:18
【问题描述】：

我有一个 <span> 元素，它位于 contentEditable <div> 内。在某些情况下，当我尝试使用Command-Delete 一次删除<div> 中的所有内容时，或者当我尝试从<span> 元素中删除单个字符时，当它是<div> 中唯一的内容时，我得到标题中的错误。

我该如何解决这个问题？

我整理了一个关于该问题的沙盒示例： https://codesandbox.io/s/nostalgic-wildflower-52eul?file=/src/App.js

它在两种情况下抛出错误（示例中的关键字是test，键入时它应该以蓝色突出显示）：

键入任何包含test 的字符串或仅输入test 并突出显示所有内容并删除。
键入任何包含test 的字符串，删除除test 之外的所有字符串，然后删除test 中的任何字符。

感谢您的帮助！

【问题讨论】：

Codesandbox 支持 JSX 和 React。转到codesandbox.io/index2，从 React 模板创建一个新模板，并用一个最小示例编辑您的问题。之后我很乐意提供帮助！
嗨@RodrigoEhlers，只需将问题的沙箱放在一起，谢谢！
@JasperHuang 这个问题得到解决了吗，我也遇到了与 Draftjs 间歇性相同的错误
@orangespark 我最终完全放弃了这个想法，因为它导致了太多问题；对不起！

标签： javascript reactjs jsx

【解决方案1】：

只需根据您的代码提供父元素的键，即 div className='app ' 或添加新的父元素并提供该元素的键。

如果发生任何变化并且您收到此错误，只需更新父元素的键

因为更新该父元素键会导致 react 将父元素与其 dom 分离，您可以避免此错误，因为问题出在子元素上。

在 onInput 中只需检查 id="addItemInput" 的元素是否存在，如果不存在则更新父元素键

【讨论】：

【解决方案2】：

当您将contentEditable 的div 设置为true 时，您很可能会看到以下错误：

Warning: A component is `contentEditable` and contains `children` managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

这里的问题是你让 React 添加一个子节点到内容可编辑div 并在与它交互并删除其所有内容时通过实际 DOM 将其删除。

React 尝试重新渲染，并删除 下一次渲染 上不应该存在的 span 但是，您已经通过键盘输入删除了它。

只有在您完全确定自己在做什么时，才应该取消警告，因为它会警告您遇到的确切错误。

你想要的解决方案不会像你希望的那样工作。

您最好尝试实现编辑模式并在用户保存内容后突出显示单词。这只是一个想法，因为我不知道你想要达到什么目的。

【讨论】：