javascript - react DOMException : Failed to execute 'removeChild' on 'Node' : The node to be removed is not a child of this node

Question

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

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

沙箱网址:

https://codesandbox.io/s/xryoz10k6o

复制方法:

如果输入表单中包含4位字符，则setState设置“isPreViewVideo: true”，如果小于false

当状态为真时它工作正常，但是当 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.

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

Answer 1

在 playYouTube.tsx 第 78 行替换 <React.Fragment>...</React.Fragment>与 <div>...</div>

Fragments let you group a list of children without adding extra nodes to the 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