Javascript 来自任何其他组件的react js触发器函数

我有一个组件，它基本上使用JW播放器在覆盖层中加载视频（下面的简化示例）

import React，{Component}来自“React”
从“react jw player”导入react JWPlayer
类VideoPopup扩展组件{
render（）{
报税表（
)
}
}
导出默认视频弹出窗口；

我希望该组件直接位于我的应用程序的根目录中，但我需要能够在从任何其他组件调用时显示它-这可能是一个子组件、一个孩子的孩子、兄弟姐妹等。我希望能够调用它并传递视频文件参考，如下所示：

<button onClick={somehow show video popup}>show video popup</button>

显示视频弹出窗口

---

如果存在直接的父子关系，我知道如何轻松地做到这一点，但如果我想将链接放置在各种不同的组件中，我就不知道如何轻松做到这一点；我希望有人能给我指出正确的方向。

如果您想在操作时摆脱父子关系，请使用Redux（）之类的事件管理器。这是相当标准的，随着你的应用程序的增长，它变得必不可少

---

其原理是，无论您在何处放置链接，它都会在单击时触发一个“操作”，该操作将被发送到一个全局调度程序，其他组件将侦听该全局调度程序以获取更改。

如果您想在操作时摆脱父子关系，请使用类似Redux（）的事件管理器。这是相当标准的，随着你的应用程序的增长，它变得必不可少

---

其原理是，无论您将链接放置在何处，它都会在单击时触发一个“操作”，该操作将发送到全局调度程序，其他组件将侦听该调度程序以获取更改。

您可以尝试使其具有全局功能，并在任何需要的地方调用它

showVideoPopup () {
    ReactDOM.render(
        <VideoPopup />,
        document.getElementById('popupHolder')
    );
}

showVideoPopup（）{
ReactDOM.render(
,
document.getElementById（'PopUploader'）
);
}

您可以尝试创建全局函数，并在任何地方调用它

showVideoPopup () {
    ReactDOM.render(
        <VideoPopup />,
        document.getElementById('popupHolder')
    );
}

showVideoPopup（）{
ReactDOM.render(
,
document.getElementById（'PopUploader'）
);
}

有多种方法可以做到这一点

• 可以定义控制显示/隐藏功能的函数 应用程序组件中的视频播放器，并将其作为 道具到可以触发事件的所有组件
• 使用。这是理想的选择。你只需要在你的应用程序中的任何地方发送一个动作，相应的减速机就会处理这个功能
• 使用全局函数（不推荐）

---

如果您需要更多解释，请发表评论。

有多种方法可以做到这一点

• 可以定义控制显示/隐藏功能的函数 应用程序组件中的视频播放器，并将其作为 道具到可以触发事件的所有组件
• 使用。这是理想的选择。你只需要在你的应用程序中的任何地方发送一个动作，相应的减速机就会处理这个功能
• 使用全局函数（不推荐）

---

如果您需要更多解释，请发表评论。

您可以通过以下方式实现此目的。谢谢@Andrew-似乎值得我花时间了解Redux您可以通过以下方式实现此目的。谢谢@Andrew-似乎值得我花时间了解Redux谢谢@JulienD-我想可能就是这样。我希望现在能有一个快速的胶带解决方案，但似乎我应该投入进去，想一想ReduxThank@JulienD——我想可能就是这样。我希望现在能有一个快速的胶带解决方案，但似乎我应该潜入其中，想一想我该如何执行第一个-即使事件触发了多个组件，它会工作吗？是的。你只需要继续把函数作为道具传递下去。您可以将pasing函数保持为所需的深度。例如：假设在root中定义了处理程序。然后嵌套组件可以调用它，如图所示。（假设“component”中有一个嵌入元素“component1child”），那么只需不断传递您想要传递的级别就可以了。这很好！谢谢你，阿米特。将来，我将实现Redux，但就目前而言，这有助于我实现我所追求的目标。我将如何执行第一个——即使事件触发多个组件，它也能工作吗？是的。你只需要继续把函数作为道具传递下去。您可以将pasing函数保持为所需的深度。例如：假设在root中定义了处理程序。然后嵌套组件可以调用它，如图所示。（假设“component”中有一个嵌入元素“component1child”），那么只需不断传递您想要传递的级别就可以了。这很好！谢谢你，阿米特。将来我将实现Redux，但就目前而言，这有助于我实现我所追求的目标。