使用getmdl與React + React路由器拋出DOMException

Question

它是一個基本示例，您可以看到source code here和action here。

請使用getmdl分支

git clone -b getmdl https://gitlab.com/problems/react_router_mdl_js.git 

---

當我使用mdl-js-layout在兩個組件，並嘗試從一個導航到另一個組件，一個例外是投控制檯：

記住：抽屜必須工作

我試圖創建一個反應成分MdlLayout，並呼籲upgradeDom

componentDidUpdate() { 
    window.componentHandler.upgradeDom() 
} 

我嘗試這樣做手工

componentDidMount() { 
    const layout = findDOMNode(this.refs.layout) 
    window.componentHandler.upgradeElement(layout) 
} 

componentWillUnmount() { 
    const layout = findDOMNode(this.refs.layout) 
    window.componentHandler.downgradeElements(layout) 
} 

但沒有任何工程。我讀到這幾篇文章，如this one，this，this和this

按照例外

DOMChildrenOperations.js?568f:65 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 
    at removeChild (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:503:1), <anonymous>:65:14) 
    at Object.processUpdates (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:503:1), <anonymous>:209:11) 
    at Object.dangerouslyProcessChildrenUpdates [as processChildrenUpdates] (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1550:1), <anonymous>:29:27) 
    at processQueue (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:137:29) 
    at ReactDOMComponent._updateChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:355:9) 
    at ReactDOMComponent.updateChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:299:12) 
    at ReactDOMComponent._updateDOMChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:936:12) 
    at ReactDOMComponent.updateComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:754:10) 
    at ReactDOMComponent.receiveComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:716:10) 
    at Object.receiveComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:286:1), <anonymous>:125:22) 
removeChild @ DOMChildrenOperations.js?568f:65 
processUpdates @ DOMChildrenOperations.js?568f:209 
dangerouslyProcessChildrenUpdates @ ReactDOMIDOperations.js?2d83:29 
processQueue @ ReactMultiChild.js?9682:137 
_updateChildren @ ReactMultiChild.js?9682:355 
updateChildren @ ReactMultiChild.js?9682:299 
_updateDOMChildren @ ReactDOMComponent.js?ab8a:936 
updateComponent @ ReactDOMComponent.js?ab8a:754 
receiveComponent @ ReactDOMComponent.js?ab8a:716 
receiveComponent @ ReactReconciler.js?399b:125 
_updateRenderedComponent @ ReactCompositeComponent.js?d2b3:754 
_performComponentUpdate @ ReactCompositeComponent.js?d2b3:724 
updateComponent @ ReactCompositeComponent.js?d2b3:645 
receiveComponent @ ReactCompositeComponent.js?d2b3:547 
receiveComponent @ ReactReconciler.js?399b:125 
_updateRenderedComponent @ ReactCompositeComponent.js?d2b3:754 
_performComponentUpdate @ ReactCompositeComponent.js?d2b3:724 
updateComponent @ ReactCompositeComponent.js?d2b3:645 
receiveComponent @ ReactCompositeComponent.js?d2b3:547 
receiveComponent @ ReactReconciler.js?399b:125 
_updateRenderedComponent @ ReactCompositeComponent.js?d2b3:754 
_performComponentUpdate @ ReactCompositeComponent.js?d2b3:724 
updateComponent @ ReactCompositeComponent.js?d2b3:645 
performUpdateIfNecessary @ ReactCompositeComponent.js?d2b3:561 
performUpdateIfNecessary @ ReactReconciler.js?399b:157 
runBatchedUpdates @ ReactUpdates.js?8e6b:150 
perform @ Transaction.js?f15f:140 
perform @ Transaction.js?f15f:140 
perform @ ReactUpdates.js?8e6b:89 
flushBatchedUpdates @ ReactUpdates.js?8e6b:172 
closeAll @ Transaction.js?f15f:206 
perform @ Transaction.js?f15f:153 
batchedUpdates @ ReactDefaultBatchingStrategy.js?e9be:62 
batchedUpdates @ ReactUpdates.js?8e6b:97 
dispatchEvent @ ReactEventListener.js?944f:147 

Answer 1

這裏的問題是，upgradeElement和downgradeElement的API正在修改這是由作出反應所產生的DOM元素，導致它在調和階段拋出異常，嘗試用view2路由組件替換view1路由組件（反之亦然）。您可以通過在MdlLayout.jsx中評論這些API調用來檢查該理論，然後在切換路由時不會再出現錯誤。

試圖直接在DOM上工作的任何庫都無法與React一起使用。有關可能的解決方法，請閱讀this和this後。

更新：

下面是與MDL項目的fork調用註釋掉，檢出從項目temp分支和運行代碼。路由器按預期工作。

對於DOM的操作，這裏是你的DOM的無MDL截圖呼籲 -

這裏與upgradeElement電話是 -

注意，MDL庫操作DOM不React的同意。