结合使用getmdl和React + React路由器抛出DOMException
结合使用getmdl和React + React路由器抛出DOMException
提问于 2017-04-07 09:22:39
这是一个基本的示例，您可以在action here中看到source code here和。
分支请使用 getmdl
git clone -b getmdl https://gitlab.com/problems/react_router_mdl_js.git当我在两个组件中使用mdl-js-layout并尝试从一个组件导航到另一个组件时，在控制台中抛出一个异常：
记住:这个抽屉应该是
我尝试创建一个react组件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回答 1
Stack Overflow用户
发布于 2017-04-12 19:41:09
这里的问题是，upgradeElement和downgradeElement API正在修改React生成的DOM元素，导致它在协调阶段抛出异常，试图用view1路由组件替换view2路由组件(反之亦然)。您可以通过在MdlLayout.jsx中注释这些API调用来验证这一理论，这样在切换路由时就不会再有错误了。
任何试图直接在DOM上工作的库都不能开箱即用React。有关可能的解决方法，请阅读this和this帖子。
更新：
下面是您的项目的fork，其中注释掉了MDL调用，从项目中签出temp分支并运行代码。路由器的工作情况与预期一致。
至于对DOM的操作，下面是没有MDL调用的DOM的屏幕截图-
下面是upgradeElement调用-
请注意，MDL库在未经React同意的情况下操作DOM。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43268185
复制相关文章
相似问题