reactjs - mdl - Uso de Material Design Lite con React
material design web (2)
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.
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.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 :)