Использование Material Design Lite с реакцией

Ответ 1

Попробуйте обернуть элемент DIV снаружи, я просто исправил эту проблему таким образом.

Если вы используете Redux + React + MDL + React-Router, вы можете перенести элемент DIV в элемент 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);
});

Надеюсь, он может вам помочь:)

Ответ 2

Первая и вторая ошибки связаны друг с другом, посмотрите исходный код макета MDL. Я бы сказал, что следующее приводит к мутации вашего корневого элемента React (который является компонентом 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_);

Если вы посмотрите на официальный официальный пример, вы увидите, что MDL массивно изменяет вашу разметку, и это именно то, что React не нравится.