React DOMException：无法在“节点”上执行“removeChild”：要删除的节点不是该节点的子节点

Question

如果状态为 true 播放 youtube 视频，如果状态为 false 我想删除 youtube 播放。我的代码如下。

 {this.state.isPreViewVideo && <PlayYouTube video_id="ScSn235gQx0" />}

沙箱网址：

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.

有没有办法避免或解决此错误？

原文由 negabaro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 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

原文由 henrik123 发布，翻译遵循 CC BY-SA 4.0 许可协议