17

我正在尝试在使用 React 的现有项目上使用 MDL，但遇到了几个问题。第一次加载时情况似乎很好，尽管有很多警告消息：

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

对于每个具有 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 渲染函数中最顶层的元素，问题就会消失。一旦我包裹了那个元素，一切都很好。

4

2 回答 2

9

尝试在外面包装一个 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);
});

希望它可以帮助你:)

于 2015-09-01T10:29:27.983 回答
6

第一个和第二个错误是相互关联的，看看 MDL的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_);

如果你看一下官方的例子，你会发现 MDL 极大地改变了你的标记，而这正是 React 不喜欢的。

BTW：我还写过一篇文章，研究 React 与 MDL 的结合。

于 2015-08-14T16:34:30.917 回答