[解決済み] react-youtubeのplay関数をstateで抽出し、ボタンoncluckの結果をCORSで使用する。

質問

を使っています。 react-youtube ライブラリがあります。ボタンのonClickイベントでYouTubeのビデオを再生したり一時停止したりしたいのですが。
YouTubeコンポーネントからイベントと関数をstateに抽出し、後でボタンのonClickでその関数を呼び出そうとしましたが、クロスオリジンエラー "Uncaught Error.が発生しました。cross-origin error was thrown. 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;

解決方法は？

react-youtube」は、内部でYouTube Apiを使用しています。プレーヤーが実行するアクションは event.target . コールバック関数 playVideo を状態保存しているため、スコープの問題が発生している可能性があります。

この場合、state に 'playVideo' 関数を格納する代わりに、単純に event.target オブジェクトを格納することができます。

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

そして、ボタンをクリックすると、このように単純にplayVideoを呼び出すことができます。

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

これでうまくいく! 私はそれをテストしました。

を保存しているので、トグル状態のロジックを持つことで、より良いものにすることができます。 event.target を直接ステートで使用します。 したがって、'playVideo' と 'pauseVideo' の両方を呼び出すことができるようになりました。