使用Material Design Lite和React

Question

我试图在使用React的现有项目上使用MDL,我遇到了几个问题.第一次加载时看起来很好,尽管有很多警告信息:

警告:ReactMount:Root元素已从其原始容器中删除.新容器:

这几乎发生在具有MDL识别的类的每个DOM元素上(例如:mdl-layout,mdl-layout__content等),它发生在任何DOM更改上.

此外,在更改路由时,存在"Invariation Violation"错误:

未捕获错误:不变违规:findComponentRoot(...,.0.2.0.1.1.0.0.0.0):无法找到元素.这可能意味着DOM意外地发生了变异(例如,浏览器)......

这是否意味着MDL和React几乎不兼容？

更新:如果具有class ="mdl-js-layout"的元素不是reactjs渲染函数中最顶层的元素,则问题将消失.一旦我包裹了那个元素,一切都很好.

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

希望它可以帮助你:)

Answer 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不喜欢的.

顺便说一句:我还撰写了一篇研究React与MDL结合的文章.