ReactJS无法更改视频和海报videojs

Question

我想在 selectedVideo 更改时更改视频海报和源 VideoJS

var VideoPlayer = React.createClass({
  render: function() {
    var selectedVideo = this.props.selectedVideo;
    function filterVideo(video) {
      return video.id == selectedVideo;
    }

    var data = this.props.videos.filter(filterVideo);
    return (
      <div className="col-md-6 videoplayer">
        <h2>{data[0].title}</h2>
        <video id="videoplayer" className="video-js vjs-default-skin vjs-big-play-centered" controls preload="none"
          width="100%"
          height="300"
          poster={data[0].poster}
          data-setup="{}">
          <source src={data[0].video} type='video/mp4' />
        </video>
        <div className="video-description">
          {data[0].description}
        </div>
      </div>
    );
  }
});

但我收到错误:

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.0.1.1 

标题和说明已更改，但视频海报未更改

Answer 1

这是破坏性库的问题。基本上发生的事情是渲染 <video>元素，然后 VideoJS 在 <video> 旁边注入(inject)一堆 sibling 元素(子元素很好)。

React 尝试更新元素，但它无法弄清楚发生了什么，因此它会出现 panic 并给出该错误。

所以你有两个选择:

选项 1:渲染 <div ref="target" /> ，在componentDidMount和this.refs.target.appendChild(that)中构建视频节点，然后手动调用VideoJS。在 componentWillRecieveProps 中，您需要直接更新海报 img 的 src。

选项 2: fork video.js 并使其仅发出事件而不是直接修改 DOM。您的组件将对这些事件使用react，修改状态并渲染海报、按钮等。

选项 1 更简单，选项 2 可能更高效、更干净。我会选择选项 1。

<小时/>

这些都不是好的解决方案，但是脱离容器的库不能很好地与 React 配合使用。