javascript - 来自任何其他组件的 React js 触发函数

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 ) 这样的事件管理器。这是相当标准的，并且随着您的应用程序的增长而变得必要。

原则是，无论您将链接放在何处，它都会在点击时触发“操作”，该操作会发送到其他组件监听更改的全局调度程序。