我有一个<span>元素，它位于contentEditable <div>的内部。在某些情况下，当我尝试使用<div>一次删除Command-Delete中的所有内容时，或者当我尝试从<span>元素中删除单个字符时，这是其中唯一的内容<div>，标题出现错误。
我该如何解决这个问题？
我整理了一个有关此问题的沙盒示例： https://codesandbox.io/s/nostalgic-wildflower-52eul?file=/src/App.js
在两种情况下都会引发错误（示例中的关键字为test，键入时应该以蓝色突出显示）：
test或仅test的字符串，然后突出显示所有内容并删除。test的任何字符串，删除除test以外的所有其他内容，然后删除test中的任何字符。感谢您的帮助！
答案 0 :(得分：1)
只需根据您的代码为父元素提供键，即 div className='app ' 或添加一个新的父元素，然后为该元素提供键。
如果有任何变化并出现此错误，只需更新父元素的键
因为更新父元素键会导致反应将父元素与其dom分离，所以您可以避免此错误，因为问题出在子元素上。
在 onInput 中，只需检查 id="addItemInput" 元素是否存在，如果不存在，只需更新父元素键
答案 1 :(得分：0)
将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，但是，您已经通过键盘输入将其删除了。
仅当您完全确定自己在做什么时，才应禁止显示警告，因为它警告您正在得到的确切错误。
您要使用的解决方案将无法正常运行。
最好在用户保存内容后尝试实现编辑模式并突出显示单词。这只是一个主意，因为我不知道您要实现的目标。