加载后如何在React组件中获取VTT字幕？

Question

字幕加载后如何在组件中获得字幕？现在，它引发有关将null的textTracks获取的错误。因此，我尝试了所有生命周期挂钩，但是由于我想跟踪子对象是异步加载的，所以我无法控制它……我需要在它们更改时将它们传递到字幕组件中，我发现我可以使用onCueChange回调以某种方式重新渲染字幕，但现在为空，因为我的组件是同步代码，无法获取之后的内容。

那么，如何控制vtt字幕以响应组件呢？

import React, { Component, Fragment } from 'react';
import Subtitles from './Subtitles';

import testSub from './test.vtt';

class Player extends Component {
  render() {
    const videoElement = document.querySelector('#video');
    const textTracks = videoElement.textTracks; // one for each track element

    return (
      <Fragment>
        <video id="video" controls>
        <source
          src="http://cool.big-sword.ga/route/?m=3318651&r=bf304ccc729b4ffddf5bd5cd11237a57e3f6cd775184112644c95a1163d44cc3f373c54fd083e25f955d8c0a01e6bb302e3afb427727cf5e4539a036dbe560ab4dabcaa3cb23a9804c759fed0bfe08274602b12ac7314eaaedb336f17998f78b"
          type="video/mp4"
        />
        <track id="track" label="Japanese" kind="subtitles" srcLang="jp" src={testSub} default />
      </video>
      <Subtitles />
    </Fragment>
  );
 } 
}

export default Player;