link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
活泼的猕猴桃 · 得到阅读器max刷文石系统_服务软件_什么值得买· 1 月前 · |
|
|
爱搭讪的红金鱼 · 原神同人志 空X刻晴（三十三 ...· 10 月前 · |
|
|
会开车的火龙果 · 《师傅，我偷时间来养你》第1话 ...· 1 年前 · |
|
|
买醉的草稿本 · 恒大汽车版图隐现:先天津后上海 ...· 1 年前 · |
|
|
眼睛小的香菜 · 国产电脑（飞腾芯片统信uos、银河麒麟系统k ...· 1 年前 · |
React DOMException:未能在“node”上执行“”removeChild“”：要移除的节点不是此节点的子节点
问
React DOMException:未能在“node”上执行“”removeChild“”：要移除的节点不是此节点的子节点
EN
Stack Overflow用户
提问于
2019-02-26 15:50:25
回答 8
查看 36.5K
关注 0
票数 30
如果状态为true播放youtube视频，而它为false，我想删除youtube播放。我的代码如下。
{this.state.isPreViewVideo && <PlayYouTube video_id="ScSn235gQx0" />}沙盒URL：
https://codesandbox.io/s/xryoz10k6o
再现方法：
如果输入表单中包含4位字符，setState将返回"isPreViewVideo: true“，如果该值小于false
当state为true时，它工作得很好，但当state为false时，我会遇到以下错误。
DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.有没有办法避免或解决这个错误？
EN
回答 8
Stack Overflow用户
发布于 2019-02-26 17:18:01
在playYouTube.tsx第78行中，将
<React.Fragment>...</React.Fragment>
替换为
<div>...</div>
片段允许您对子节点列表进行分组，而无需向DOM中添加额外的节点。
这解释了错误
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
有关片段的更多信息，请单击此处 https://reactjs.org/docs/fragments.html
票数 37
EN
Stack Overflow用户
发布于 2020-06-19 00:49:06
如果使用Google Translate (或任何其他更改页面DOM的插件)，也会引发此错误
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
。
这在这期Github中有详细介绍： https://github.com/facebook/react/issues/11538
票数 23
EN
Stack Overflow用户
发布于 2020-11-10 19:56:18
问题说明：
当
isPreViewVideo
是真实的时，你会得到这样的结果：
<PlayYouTube video_id="ScSn235gQx0" />这可能会呈现如下所示的内容：
<div> <!-- the root element as rendered by PlayYouTube if isPreViewVideo is truthy -->
<embed /> <!-- the video player or whatever PlayYouTube renders -->
</div>
现在，如果一些代码通过直接操作DOM和删除根
div
来删除播放器，那么您最终将得到...好吧，什么都没有。
但是在React的虚拟DOM中，根
div
仍然存在！因此，当
isPreViewVideo
出现错误时，React会尝试将其从真正的DOM中删除，但由于它已经消失，因此会抛出错误。
解决方案：
要使用这样的
div
扩展@henrik123的答案包装
PlayYouTube
...
<div> <!-- the root element rendered if isPreViewVideo is truthy -->
<PlayYouTube video_id="ScSn235gQx0" />
</div>对此执行...causes以进行渲染：
<div> <!-- the root element rendered if isPreViewVideo is truthy -->
<div> <!-- the element as rendered by PlayYouTube -->
<embed /> <!-- the video player or whatever PlayYouTube renders -->