link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
很拉风的小狗 · React中如何在FileReader的on ...· 4 月前 · |
|
|
难过的大熊猫 · 使用yarn+env-cmd时，如何在cre ...· 3 月前 · |
|
|
逆袭的移动电源 · 2022金山软件集团KING计划管培生校园招聘· 7 月前 · |
|
|
坚强的脸盆 · 天竺菩提手串多少钱，天竺菩提手串价格与图片-爱藏网· 1 年前 · |
|
|
温文尔雅的豆芽 · 四星(钻)级酒店,酒店预订查询,宾馆住宿【携 ...· 1 年前 · |
|
|
沉稳的杨桃 · 群峰东江城项目二期2号用地开发建设工程—A区 ...· 1 年前 · |
|
|
细心的汤圆 · 济南市工业和信息化局 区县信息 ...· 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 -->