React Player的Ref在CodeSandbox正常但本地报错，求解决方法

报错根源 #

你判断的完全正确：这个Cannot set properties of undefined错误，是因为你在函数组件里误用了类组件的this写法。函数组件没有类组件那样的this上下文，直接用this.player会导致this为undefined，自然无法设置player属性。

函数组件的正确写法 #

在函数组件中，需要使用React的useRef钩子来管理播放器的ref，具体步骤如下：

1. 导入所需依赖：

import React, { useRef } from 'react';
import ReactPlayer from 'react-player';

2. 创建ref对象：

const playerRef = useRef(null);

3. 将ref绑定到ReactPlayer组件：

<ReactPlayer
  ref={playerRef}
  className='react-player'
  url="你的视频地址"
  // 其他播放器配置项
/>

4. 通过ref操作播放器（比如实现进度条定位）：

// 进度条拖动跳转播放位置
const handleSeek = (e) => {
  if (playerRef.current) {
    // 将进度值转为0-1的比例传入seekTo方法
    playerRef.current.seekTo(parseFloat(e.target.value) / 100);
  }
};

// 配合range输入控件使用
<input
  type="range"
  min="0"
  max="100"
  step="0.1"
  onChange={handleSeek}
/>

为什么CodeSandbox能正常运行？ #

你提到的CodeSandbox示例是类组件写法（class App extends React.Component），类组件内部有this上下文，所以ref = player => {this.player = player}这种赋值方式是合法的，不会触发undefined错误。而你本地代码用的是函数组件，照搬类组件的this写法就会出现兼容性问题。

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