使用react-youtube时除事件外如何引用播放器实例调用相关API？

你可以通过react-youtube组件暴露的onReady回调拿到播放器实例，用React的useRef存储即可实现全局稳定引用，不需要依赖其他状态变更事件。

具体实现步骤 #

• 首先在组件内声明useRef变量存储播放器实例
• 给YouTube组件绑定onReady事件，在回调中将事件对象的target属性（就是播放器实例）赋值给ref的current属性
• 后续所有需要调用播放器API的地方，直接通过ref.current调用即可，调用前加非空判断避免实例未初始化时报错

修改后的完整代码如下：

import YouTube from "react-youtube";
import { useRef, useEffect } from "react";

function SyncPlayer({ code, setPlayerURL, sendCode, onPlayerStateChange, playerState} ) {
  // 声明ref存储播放器实例
  const youtubePlayerRef = useRef(null);

  useEffect(() => {
    // 先判断实例是否存在，避免报错
    if(playerState == 1 && youtubePlayerRef.current){
      youtubePlayerRef.current.playVideo();
    }
    // 暂停逻辑同理
    if(playerState == 2 && youtubePlayerRef.current){
      youtubePlayerRef.current.pauseVideo();
    }
  }, [playerState])

  const opts = {
    playerVars: {
      autoplay: 0
    }
  };
  
  // 播放器初始化完成的回调
  const handlePlayerReady = (e) => {
    youtubePlayerRef.current = e.target;
  };

  return (
    <div>
      <div>
        <input id="urlinput" type="text" placeholder="Video URL" onChange={(event) => setPlayerURL(event.target.value)}/>
        <button onClick={(event) => sendCode(event)}>submit</button> 
        <div>
          <YouTube
            videoId={code}
            containerClassName="embed embed-youtube"
            opts={opts} 
            onStateChange={onPlayerStateChange}
            {/* 绑定onReady事件获取实例 */}
            onReady={handlePlayerReady}
          />
        </div>
      </div>
    </div>
  );
}

export default SyncPlayer;

注意事项 #

• 播放器实例只会在onReady触发后才会存入ref，所以所有调用实例方法的位置都要先判断youtubePlayerRef.current是否存在，避免组件还没挂载完成、播放器还没初始化就调用方法导致报错
• 当videoId变更导致播放器重新初始化时，onReady会再次触发，ref会自动更新为新的实例，不需要额外处理

内容的提问来源于stack exchange，提问作者agonzales