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

Я пытаюсь использовать MDL для существующего проекта, который использует React, и я сталкиваюсь с несколькими проблемами. На первом загрузке все выглядит нормально, хотя есть много предупреждающих сообщений:

Предупреждение: ReactMount: элемент корня был удален из исходного контейнера. Новый контейнер:

Это происходит практически для каждого элемента DOM, который имеет класс, распознаваемый MDL (примеры: mdl-layout, mdl-layout__content и т.д.), и это происходит при любых изменениях DOM.

Кроме того, при изменении маршрутов происходит ошибка "Нарушение инвариантности":

Неисправленная ошибка: инвариантное нарушение: findComponentRoot (...,.0.2.0.1.1.0.0.0.0): невозможно найти элемент. Вероятно, это означает, что DOM неожиданно мутировался (например, браузером)...

Означает ли это, что MDL и React в значительной степени несовместимы?

Обновить. Проблема исчезает, если элемент с class= "mdl-js-layout" не является самым верхним элементом в функции рендеринга reactjs. Как только я завернул этот элемент, все хорошо.

Ответ 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 не нравится.

BTW: Я также написал статью, в которой изучается комбинация React with MDL.