ReactJS kann Video- und Poster-Videojs nicht ändern

Dies ist ein Problem mit destruktiven Bibliotheken. Im Grunde genommen rendern Sie das <video> -Element, und dann injiziert VideoJS eine Reihe Geschwister -Elemente neben Ihrem <video> (untergeordnete Elemente sind in Ordnung).

Reagieren versucht, das Element zu aktualisieren, und es kann nicht herausfinden, was vor sich geht, so dass es in Panik gerät und diesen Fehler gibt.

Sie haben also zwei Möglichkeiten:

Option 1: Rendern Sie <div ref="target" /> , konstruieren Sie den Videoknoten in componentDidMount und this.refs.target.appendChild(that) , und rufen Sie dann VideoJS manuell auf. In componentWillRecieveProps müssen Sie die Quelle des Posters img direkt aktualisieren.

Option 2: verzweigen Sie video.js und lassen Sie es nur Ereignisse ausgeben, anstatt das DOM direkt zu modifizieren. Ihre Komponente würde auf diese Ereignisse reagieren, den Status ändern und das Poster, die Schaltflächen usw. rendern.

Option 1 ist einfacher, Option 2 ist potenziell effizienter und sauberer. Ich würde mit Option 1 gehen.

Keine davon ist eine gute Lösung, aber Bibliotheken, die ihren Container verlassen, spielen nicht gut mit react.

Falls jemand ein Beispiel für die Antwort von FakeRainBrigand benötigt, sieht meine Video-Klasse am Ende so aus.

Nicht 100% verwandt, aber wenn Sie nach einer "reineren" Lösung für die Implementierung von videoJS als Komponente suchen, habe ich das gemacht ...

Der letzte Beitrag war vor einer Weile und ich weiß nicht, ob jemand eine bessere Implementierung hatte, was ich jedoch tat, war folgendes:

1. Die videojs-Funktion wurde als getInitialState-Prop hinzugefügt und eine "videoHTML" -Stütze wurde dem getInitialState hinzugefügt.
2. Ich habe mein Video-Tag und meine Quellen in der Methode componentDidMount generiert und diese Variable dem videoHTML-Status prop zugeordnet.
3. Ein dispose () des instanziierten vjs-Players und ein replaceState des Anfangszustands wurden der componentWillUnmount () -Methode hinzugefügt.
4. Es wurde eine Komponentenfunktion __initVideo (elem) hinzugefügt, die überprüft, ob das übergebene Element untergeordnete Elemente hat, und wenn dies der Fall ist, dann "this.vjsPlayer = this.state.initVideoJS (elem.children [0], {})". Dann gebe ich this.vjsPlayer zurück.
5. Im Attachment-Div in der render () -Methode setze ich die dangerousSetInnerHTML-Prop auf die this.state.videoHTML-Prop und setze einen ref, der die __initVideo-Funktion aufruft und div.
übergibt

Ich kann keinen Code posten, aber das ist so nah an einer reinen React-Implementierung von videoJS, die ich herausgefunden habe.