reactjs - mdl - Uso de Material Design Lite con React

material design web

Question

Intento utilizar MDL en un proyecto existente que usa React, y me encuentro con varios problemas. Las cosas parecen estar bien en la primera carga, aunque hay muchos mensajes de advertencia:

Advertencia: ReactMount: el elemento raíz se ha eliminado de su contenedor original. Nuevo contenedor:

Esto sucede prácticamente con cada elemento DOM que tenga una clase reconocida por MDL (ejemplos: mdl-layout, mdl-layout__content, etc.) y ocurre en cualquier cambio DOM.

Además, cuando se cambian las rutas, hay un error de "Violación de Invalación":

Error no detectado: violación invariable: findComponentRoot (..., .0.2.0.1.1.0.0.0.0): no se puede encontrar el elemento. Esto probablemente significa que el DOM fue inesperadamente mutado (por ejemplo, por el navegador) ...

¿Esto significa que MDL y React son bastante incompatibles?

Actualización : el problema desaparece si el elemento con clase = "mdl-js-layout" no es el elemento superior en la función de renderización reactjs. Una vez que envolví ese elemento, todo está bien.

Answer 1

El primer y el segundo error están relacionados entre sí, eche un vistazo al código fuente de diseño de MDL . Diría que la siguiente causa la mutación de su elemento raíz React (que es el 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_);

Si echas un vistazo al ejemplo oficial , puedes ver que MDL cambia masivamente tu marcado y eso es exactamente lo que a React no le gusta.

Por cierto: también he compuesto un artículo que estudia la combinación de Reaccionar con MDL.

Answer 2

Trata de envolver un elemento DIV afuera, solo solucioné ese problema de esta manera.

Si está utilizando Redux + React + MDL + React-Router, puede ajustar un elemento DIV al 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);
});

Espero que te ayude :)