Verwenden von Material Design Lite mit React

Question

Ich versuche, MDL für ein vorhandenes Projekt, das React verwendet, zu verwenden, und ich stehe auf mehrere Probleme. Die Dinge scheinen auf den ersten Last in Ordnung, obwohl es viele Warnmeldungen sind:

Warning: ReactMount: Root element has been removed from its original container. New container:

Das für jedes DOM-Element ziemlich viel passiert, die eine Klasse von MDL (Beispiele erkannt hat: mdl-Layout, mdl-layout__content usw.) und es passiert bei DOM-Änderungen.

Wenn ferner Routen zu ändern, gibt es eine „Invariation Verletzung“ Fehler:

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.0.1.1.0.0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser)...

Ist dies, dass MDL bedeuten und Reagieren Sie sind so ziemlich unvereinbar?

Aktualisieren: Das Problem verschwindet, wenn das Element mit class = "mdl-js-layout" nicht das oberste Element in der Renderfunktion rectjs ist. Sobald ich dieses Element eingepackt habe, ist alles gut.

Answer 1

Der erste und zweite Fehler sind miteinander verwandt, siehe MDL's layout source code. Ich würde sagen, dass die nach der Mutation des verursacht Wurzelelement reagieren (das ist die mdl-js-layout Komponente):

var container = document.createElement('div'); 
container.classList.add(this.CssClasses_.CONTAINER); 
this.element_.parentElement.insertBefore(container, this.element_); 
this.element_.parentElement.removeChild(this.element_); 
container.appendChild(this.element_); 

Wenn Sie einen Blick auf die official example nehmen, können Sie sehen, dass MDL Markup massiv verändert und das ist genau was React nicht mag.

---

BTW: Ich habe auch an article zusammengesetzt, die die Kombination von Reaktion mit MDL studiert.

Answer 2

Versuchen Sie, ein DIV-Element außerhalb zu wickeln, ich habe dieses Problem auf diese Weise behoben.

Wenn Sie mit Redux + Reagieren + MDL + Reagieren-Router, Sie können ein DIV-Element zu Element Provider wickeln:

import React, { createStore }  from 'react'; 
import { Provider }    from 'react-redux'; 
import Router, { HistoryLocation } from 'react-router'; 

var store = createStore(); 

Router.run(routes, HistoryLocation, (Handler, state) => { 
    React.render((
     <div> 
      <Provider store={store}> 
      { 
       () => <Handler {...state} /> 
      } 
      </Provider> 
     </div> 
    ), document.body); 
}); 

Hoffe, dass es Ihnen helfen kann :)