Uso di Material Design Lite con React

Question

Sto cercando di utilizzare MDL su un progetto esistente che utilizza React e sto riscontrando diversi problemi. Le cose sembrano bene sul primo carico, anche se ci sono molti messaggi di avviso:

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

Ciò avviene praticamente per ogni elemento DOM che ha una classe riconosciuta dalla MDL (esempi: MDL-Layout, MDL-layout__content, etc.) e succede su qualsiasi cambiamento DOM.

Inoltre, quando si cambia percorsi, c'è un errore "invarianza Violazione":

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)...

Questo significa che MDL e reagiscono sono praticamente incompatibili?

Aggiornamento: il problema scompare se l'elemento con class = "mdl-js-layout" non è l'elemento più in alto nella funzione di rendering reactjs. Una volta che ho avvolto quell'elemento, tutto va bene.

Answer 1

Il primo e il secondo errore sono correlati tra loro, dare un'occhiata a MDL's layout source code. Direi che le seguenti cause della mutazione del vostro elemento radice React (che è il componente mdl-js-layout):

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_); 

Se si dà un'occhiata alla official example, si può vedere che MDL cambia in maniera massiccia il markup e che è esattamente ciò che React non piace.

---

BTW: Ho anche composto an article che studia la combinazione di reagire con MDL.

Answer 2

Cercare di avvolgere un elemento DIV all'esterno, ho risolto il problema in questo modo.

Se si utilizza Redux + Reagire + MDL + React-router, è possibile avvolgere un elemento DIV all'elemento Provider:

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); 
}); 

spero che possa aiutare :)