react mdl reactjs material-design-lite

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