Using Material Design Lite with React

advertisements

I am trying to use MDL on an existing project that uses React, and I am running into several issues. Things seem fine on the first load, although there are many warning messages:

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

This happens pretty much for every DOM element that has a class recognized by MDL (examples: mdl-layout, mdl-layout__content, etc.) and it happens on any DOM changes.

Further, when changing routes, there is an "Invariation Violation" error:

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

Does this mean that MDL and React are pretty much incompatible?

Update: The issue disappears if the element with class="mdl-js-layout" is not the topmost element in the reactjs render function. Once I wrapped that element, all is good.


Try to wrap a DIV element outside, I just fixed that problem in this way.

If you are using Redux + React + MDL + React-Router, You can wrap a DIV element to Provider element:

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

Hope it can help you :)