提取处于状态的 react-youtube 的播放功能以在按钮 oncluck 中使用导致 CORS

Question

我在我的 React 项目中使用来自 npm 的 react-youtube 库。我想在按钮 onClick 事件上播放和暂停 YouTube 视频。
我尝试从 YouTube 组件中提取事件和函数到状态，然后通过按钮 onClick 调用该函数，但它会导致跨源错误“未捕获错误：抛出跨源错误。React 没有访问权限到开发中的实际错误对象。有关更多信息，请参阅 https://reactjs.org/link/crossorigin-error。“
我究竟做错了什么？以及如何从另一个组件（如按钮）触发 YouTube 组件事件？

import './App.css';
import YouTube from 'react-youtube';
import React, { Component } from 'react';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      playerPlayVideo: () => {}
    }
    this.videoOnReady = this.videoOnReady.bind(this);
  }

  videoOnReady(event) {
    // access to player in all event handlers via event.target
    this.setState({
      playerPlayVideo: event.target.playVideo
    });
  }

  render() { 
    const opts = {
      height: '390',
      width: '640',
    };

    return ( 
      <div>
        <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this.videoOnReady} />
        <button onClick={this.state.playerPlayVideo}>play</button>
      </div>
    );
  }
}
 
export default App;

Answer 1

'react-youtube' 在内部使用 YouTube Api。玩家执行的动作基于 event.target。您正在将回调函数 playVideo 保存在一个状态中，这可能会导致范围问题。

在这种情况下，您可以简单地将 event.target 对象存储在状态中，而不是将 'playVideo' 函数存储在状态中。

this.state = {
  playerPlayVideo: {},
};

然后在点击按钮时，您可以像这样简单地调用 playVideo，

<button onClick={() => this.state.playerPlayVideo.playVideo()}>
   play
</button>

这行得通！！我已经测试过了。

您还可以通过切换状态逻辑来改善这一点，因为您现在直接将 event.target 存储在状态中。因此，您现在可以同时调用 'playVideo' 和 'pauseVideo'

提取处于状态的 react-youtube 的播放功能以在按钮 oncluck 中使用导致 CORS

Extracting play function of react-youtube in state to use in button oncluck results in CORS

javascript

youtube

event-handling

reactjs