Question

我有一个基本上使用JW Player在叠加层中加载视频的组件（下面的简化示例）。

import React, { Component } from 'react'
import ReactJWPlayer from 'react-jw-player'

class VideoPopup extends Component {

render() {
    return (            
        <div id="video">
            <ReactJWPlayer 
              playerId='video-player'
              playerScript='https://content.jwplatform.com/libraries/vr6ybmGf.js'
              file='path to video file'
            />
        </div>

    )
  }
}

export default VideoPopup;

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

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

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

Answer 1

如果您想要在动作方面摆脱父子关系，请使用Redux（react-redux）之类的事件管理器。无论如何，随着应用程序的增长，这是非常标准的。

原则是无论你在何处放置链接，它都会触发一个＆＃34;动作＆＃34; on click，发送给全局调度程序，其他组件侦听更改。

Answer 2

多种方法

您可以定义一个控制显示/隐藏功能的功能应用程序组件本身的视频播放器，并作为一个传递给它支持可以触发事件的所有组件。
使用Redux。这是理想的选择。您只需从应用程序的任何位置发送操作，相应的reducer将负责该功能。
使用全局功能（不推荐）。

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

Answer 3

您可以尝试创建全局功能并在任何地方调用它。

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

从任何其他组件反应js触发器功能

3 个答案: