(Invariant Violation: ReactMount) Wie man JQuery Plugins in react benutzt, die das DOM nach dem Rendern verändern

Question

Ich habe die folgende Komponente, einen Video Player welcher ein jQuery basiertes Plugin (AfterGlow) benutzt. Die Komponente wird erfolgreich gerendert, selbst nachdem AfterGlow das ursprüngliche Element geändert hat. Wenn jedoch eine Video Player-Schaltfläche angeklickt wird, fügt AfterGlow dem VideoPlayer div eine Klasse hinzu oder entfernt sie. Zu diesem Zeitpunkt sind die beiden DOMs nicht mehr synchron und es wird ein Invariant Violation-Fehler ausgelöst.

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; 

Der Fehler:

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

ich die Vorschläge zu dieser Seite versucht haben: https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md, aber dies scheint nicht die Probleme der DOM-Manipulation nach dem Rendern (dynamisch) zu lösen. Wie kann Reagieren diese DOM-Änderungen entweder ignorieren oder dieses Element irgendwie statisch gerendert werden? Oder finde ein anderes Video-Plugin.

Answer 1

Ich bin kein React Pro, aber für mich sieht die Lösung ziemlich einfach aus. Haben Sie versucht, die ID-Eigenschaft basierend auf der Video-ID dynamisch festzulegen? Auf diese Weise sollte das Problem verschwinden, da jeder Spieler seine eigene ID hat.