（Invariant Violation：ReactMount）レンダリング後にDOMを変更する反応でJQueryプラグインを使用する方法

Question

次のコンポーネント、jQueryベースのプラグイン（AfterGlow）を使用するビデオプレーヤーがあります。 AfterGlowが元の要素を変更した後でも、コンポーネントは正常にレンダリングされますが、ビデオプレーヤーボタンがクリックされるたびに、AfterGlowはVideoPlayer divにクラスを追加/削除します。この時点で、2つのDOMは互いに同期しておらず、不変の違反エラーはスローされます。

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

私はリアクトプロではありませんが、私にとっては解決策は非常に簡単です。 idプロパティをビデオIDに基づいて動的に設定しようとしましたか？この方法では、各プレーヤーはそれ自身のIDを持っているので、問題は消えるはずです。