Reactjs 设计讨论：带有Youtube播放器的Modal React组件

我想要一些设计建议。我正在开发一个React/Redux应用程序，它将在一个模式对话框中播放Youtube视频

我最初的设计是使用lifecycle钩子在modal的

组件didmount

中初始化Youtube iframe API。这种方法的问题是Youtube播放器的启动成本很高——在打开模式和播放器弹出视频之间有明显的延迟

我需要做的是初始化播放器一次，然后根据道具发送到modal的不同视频提示。然而，我想不出一个适合这个模型的好的、惯用的设计

到目前为止，我的想法是：

• 使用模态进行黑客攻击，使其永远不会卸载，而只是基于某些道具值隐藏。
  • 这是我在这个应用程序的前一个非反应版本中的设计，但它感觉非常粗糙，我想想出更好的东西
• 在应用加载时初始化youtube播放器，并将该元素保存在应用商店中，通过要渲染的道具将其传递给modal。
  • 建议在
• 在应用程序的某个更高级别初始化youtube播放器，该应用程序始终安装，但使用CSS将其隐藏。在安装modal时，将元件向内移动，然后在卸载之前将其再次向外移动。
  • 到目前为止，这可能是我最喜欢的想法，只是感觉可能会有更好的想法

---

任何关于如何设计的想法都将不胜感激

有一种类似于您所描述的最后一个选项（首选选项）的方法。 据我记忆所及，它被称为

portal

基本方法是：在

componentDidMount

（例如show）和

componentWillUnmount

（例如hide）中使用组件外部的元素进行操作

React的强大功能之一是它的生命周期方法。即使没有

.render（）

方法，也可以创建组件

这里可以找到一些例子

这里呢

在React Conf上有一个关于这个的很好的讨论，它完全改变了我对生命周期方法的看法。

---

谢谢你的回答。通过查看门户库，我了解了一些如何做到这一点的方法。不幸的是，它们并没有直接为我工作，主要是因为Youtube Iframe在重新渲染时会出现各种各样的问题。最后，我不得不将元素存储在文档根目录下，并使用CSS将其移动，使其看起来像是在模式中一样。很黑，但我能得到的最好的。。。