reactjs – 使用Material Design Lite与React

我试图在使用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 render函数中最顶层的元素，则该问题将消失。一旦我包裹了这个元素，一切都是好的。

尝试将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);
});

希望可以帮助你:)

reactjs – 使用Material Design Lite与React

相关文章