Javascript 将document.querySelector（）转换为Reactjs

我正在尝试将下面的代码转换为Reactjs。我使用下面的代码将播放器嵌入到我的网站，只要我知道我们可以使用“ref”来替换文档。querySelector（'.classname'）而不是针对特定的DOM来更改或修改它，但我仍然感到困惑和错误，下面更改代码的最佳实践是什么

var playerConfig = {
    "libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
    ui: {
        fluid: true
    },
};

var element = document.querySelector('.video-container');
var player = new THEOplayer.Player(element, playerConfig);

player.source = {
    sources : [{
        src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source //  //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
        type : 'application/x-mpegurl' // sets type to HLS
    }],
    textTracks : [{
        default: true, //optional
        kind : 'subtitles',
        src : 'example.srt',
        srclang : 'en'
    }]
};


player.addEventListener('sourcechange', function() {
    player.removeEventListener('playing', firstplay);
    player.addEventListener('playing', firstplay);
});

---

您可以简单地编写一个react组件，并在componentDidMount方法中添加自定义事件侦听器

const playerConfig = {
    "libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
    ui: {
        fluid: true
    },
};

class App extends React.Component {
    componentDidMount() {
        const player = this.player;
        player.addEventListener('sourcechange',() => {
            player.removeEventListener('playing', this.firstplay);
            player.addEventListener('playing', this.firstplay);
        });
        this.playerSrc = new THEOplayer.Player(player, playerConfig);

        this.playerSrc.source = {
            sources : [{
                src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source //  //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
                type : 'application/x-mpegurl' // sets type to HLS
            }],
            textTracks : [{
                default: true, //optional
                kind : 'subtitles',
                src : 'example.srt',
                srclang : 'en'
            }]
        };

    }
    render() {
       return <div className={video-container} ref={(ref) => this.player = ref}/>
    }
}

const playerConfig={
“图书馆位置”：“//cdn.theoplayer.com/dash/theoplayer/”，
用户界面：{
流体：对
},
};
类应用程序扩展了React.Component{
componentDidMount（）{
const player=this.player；
player.addEventListener（'sourcechange'，（）=>{
player.removeEventListener（'playing'，this.firstplay）；
player.addEventListener（'playing'，this.firstplay）；
});
this.playerSrc=new THEOplayer.Player（Player，playersconfig）；
this.playerSrc.source={
资料来源：[{
src:'//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8'，///sets HLS source///cdn.theoplayer.com/video/star_wars_插曲(vii)(原力)唤醒(官方)漫画(con 2015))))/index.m3u8
type:'application/x-mpegurl'//将类型设置为HLS
}],
文本跟踪：[{
默认值：true，//可选
种类:"字幕",，
src:'example.srt'，
斯克朗：“恩”
}]
};
}
render（）{
返回this.player=ref}/>
}
}

请至少提供您的react代码，说明您的尝试和错误（或制作一段代码片段，说明您的问题）