Question

我正在尝试使用React钩子。我对此代码有疑问：

class VideoItem extends Component  {    
  handlePlayingStatus = () => {
    this.seekToPoint();
...
  }

  seekToPoint = () => {
    this.player.seekTo(30); // this worked - seek to f.ex. 30s
  }

  render() {
    const { playingStatus, videoId } = this.state;
    return (
      <Fragment>
        <ReactPlayer
          ref={player => { this.player = player; }}
          url="https://player.vimeo.com/video/318298217"
        />
        <button onClick={this.handlePlayingStatus}>Seek to</button>
      </Fragment>
    );
  }
}

因此，我想从播放器获取引用并在其上使用查找功能。这工作得很好，但我有一个问题将其更改为挂钩代码。

const VideoItem = () => {    
  const player = useRef();

  const handlePlayingStatus = () => {
    seekToPoint();
...
  }

  const seekToPoint = () => {
    player.seekTo(30); // this does not work
  }

    return (
      <Fragment>
        <ReactPlayer
          ref={player}
          url="https://player.vimeo.com/video/318298217"
        />
        <button onClick={handlePlayingStatus}>Seek to</button>
      </Fragment>
    );
}

如何重塑它？

Answer 1

来自documentation：

useRef返回一个可变的ref对象，该对象的.current属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。

因此您的代码应为：

player.current.seekTo(30);

（（可选检查是否设置了player.current）

useCallback可能对您也很有趣。

Answer 2

useRef 是一个挂钩函数，该函数被分配给变量 inputRef ，然后附加到您要引用的HTML元素内名为ref的属性。

很容易吧？

然后

React将为您提供一个具有名为 current 的属性的对象。

current的值是一个对象，代表您选择引用的DOM节点。

因此，在使用useRef播放器之后，包含当前对象，并且在当前对象内部，vimeo播放器中的所有方法都将可用（在您的情况下，seekTo（number））

所以您应该改用player.current.seekTo（30）。

请参考this以了解有关useRef的更多信息。

React Hooks UseRef问题

2 个答案: