Question

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

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

这对于每个具有MDL识别的类的DOM元素（例如：mdl-layout，mdl-layout__content等）几乎都会发生，并且它发生在任何DOM更改上。

此外，在更改路线时，会发生＆＃34; Invariation Violation＆＃34;错误：

未捕获错误：不变违规：findComponentRoot（...，.0.2.0.1.1.0.0.0.0）：无法找到元素。这可能意味着DOM意外地发生了变异（例如，通过浏览器）......

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

更新：如果元素的类别为＆＃34; mdl-js-layout＆＃34;则问题会消失不是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's layout source code。我会说以下导致你的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_);

如果您查看official example，您会发现MDL会大幅更改您的标记，这正是React不喜欢的。

<小时/> BTW：我还编写了an article来研究React与MDL的组合。

使用Material Design Lite和React

2 个答案: