reactjs - 将 Material Design Lite 与 React 结合使用

Question

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

Warning: ReactMount: Root element has been removed from its original container. New container:

对于每个具有 MDL 识别的类的 DOM 元素(例如:mdl-layout、mdl-layout__content 等)，这种情况几乎都会发生，并且在任何 DOM 更改时都会发生。

此外，更改路线时，会出现“Invariation Violation”错误:

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.0.1.1.0.0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser)...

这是否意味着 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);
});

希望对你有帮助:)