使用Material Design Lite和React

我想在使用React的现有项目上使用MDL，并且遇到了几个问题。事情似乎在第一负载精细，虽然有很多的警告信息：使用Material Design Lite和React

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

这种情况非常的具有由MDL（实例识别的每类DOM元素：MDL-布局，MDL-layout__content等。），它发生在任何DOM更改上。

此外，改变路由时，有一个“Invariation冲突”错误：

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并作出反应是非常不兼容？

更新：如果class =“mdl-js-layout”的元素不是reactjs渲染函数中的最顶层元素，则问题消失。一旦我包裹了这个元素，一切都很好。

来源

2015-08-13 Penar

我的项目采用发生反应， MDL很好。他们绝对不是不兼容 –

谢谢@MichaelParker很好地了解这两项工作在一起。 – Penar

刚刚看到您的更新。你能详细阐述一下你必须做些什么来解决这个问题吗？我仍然很好奇可能导致你的问题。 –

第一个和第二个错误是相互关联的，请看MDL's layout source code。我要说的是由以下原因引起你的阵营根元素的突变（这是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它研究与MDL阵营的组合。

来源

2015-08-14 16:34:30

博客链接已损坏，请附上相关信息，不仅仅链接到它 – daw

@daw给出相关信息，深入信息链接。如果博客遥不可及，您可以等待直到它再次运行。 –

尝试在外面包装DIV元素，我只是用这种方法解决了这个问题。

如果您使用的终极版+阵营+ MDL +阵营的路由器，你可以用一个DIV元素来提供元素：

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-01 10:29:27 Brothers

从我工作也具有稍微不同路由器设置 '''Router.run（路线，Router.HistoryLocation，（根，状态）=> { React.render（（

），document.body的） ; }）; ''' – ActualAl

使用Material Design Lite和React

回答

相关问题