使用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

回答

相關問題