将组件映射为“contentEditable”元素。如何在通过backspace删除组件时避免Node.removeChild错误？
将组件映射为“contentEditable”元素。如何在通过backspace删除组件时避免Node.removeChild错误？
提问于 2021-10-29 01:43:16
我正在做一个不和谐的克隆，并试图在聊天栏中实现一个“被提及”的特性。
我的元素看起来如下：
<span
contentEditable
suppressContentEditableWarning={true}
onInput={(e) => {
setMsg(e.target.innerHTML);
}}
>
{mentions &&
mentions.map((obj, i) => {
return (
<>
<MentionWrapper
key={i}
displayName={obj.displayName}
uid={obj.uid}
id={obj.id}
/>
<span> </span>
</>
);
})}
</span>当我通过backspace删除其中一个“提到”组件时，我遇到了问题。如果我试图在以后的任何时候设置set变量的状态，则响应重新呈现，就会得到一个错误。
Node.removeChild:要删除的节点不是此节点contentEditable的子节点
我明白为什么会发生这种事。我只是想知道有没有办法解决这个问题。
回答 1
Stack Overflow用户
发布于 2022-04-07 15:34:15
我正在用键来解决数组改变长度时的错误
<span
key={mentions.length}
contentEditable
suppressContentEditableWarning={true}
onInput={(e) => {
setMsg(e.target.innerHTML);
}}
>
{mentions &&
mentions.map((obj, i) => {
return (
<>
<MentionWrapper
key={i}
displayName={obj.displayName}
uid={obj.uid}
id={obj.id}
/>
<span> </span>
</>
);
})}
</span>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69762696
复制相关文章
相似问题
腾讯云开发者
