Question

我有以下组件，一个使用基于jQuery的插件（AfterGlow）的视频播放器。即使在AfterGlow改变原始元素之后，组件也会成功呈现，但是，只要单击任何视频播放器按钮，AfterGlow就会向VideoPlayer div添加/删除一个类。此时，两个DOM彼此不同步，并且抛出了Invariant Violation错误。

import React from 'react';
import ReactDOM from 'react-dom';

class VideoPlayer extends React.Component {

  static propTypes = {
    files: React.PropTypes.array.isRequired
  };

  constructor() {
    super();
  }

  componentDidMount() {
    window.afterglow.init()
  }

  render() {
    let videoSources = this.props.files.map(function(source) {
      return (<source key={`${source}-source`} src={source} />);
    }.bind(this));

    return (
      <div className='VideoPlayer'>
        <video
          width="650" height="325" id="VideoPlayer" key="VideoPlayer" data-skin="dark" className='afterglow responsive'>
          {videoSources}
        </video>
      </div>
    );
  }
}

export default VideoPlayer;

错误：

invariant.js?4599:39 Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .2.$11.$VideoPlayer

我已尝试过此页面上的建议：https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md，但这似乎无法解决渲染（动态）后DOM操作的问题。 React如何忽略这些DOM更改，或者以静态方式呈现此元素？或者找一个不同的视频插件。

Answer 1

我不是React专家，但对我来说，解决方案看起来很简单。您是否尝试根据视频ID动态设置id属性？这样，问题就会消失，因为每个玩家都拥有自己的ID。

（不变违规：ReactMount）如何在反应中使用JQuery插件，在rending之后改变DOM

1 个答案: