在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

如果使用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

问题说明：

当 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 -->