javascript - 将 getmdl 与 React + React Router 一起使用抛出 DOMException

Question

这是一个基本示例，您可以看到 source code here在action 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

Answer 1

这里的问题是 upgradeElement 和 downgradeElement API 正在修改由 React 生成的 DOM 元素，导致它在它尝试的协调阶段抛出异常用 view2 路由组件替换 view1 路由组件(反之亦然)。您可以通过在 MdlLayout.jsx 中注释这些 API 调用来验证这一理论，然后在切换路由时不会再出现错误。

任何尝试直接在 DOM 上工作的库都无法与 React 开箱即用。有关可能的解决方法，请阅读 this和 this发布。

更新:

这是一个 fork注释掉 MDL 调用的项目，从项目中 check out temp 分支并运行代码。路由器按预期工作。

至于 DOM 的操作，这里是没有 MDL 调用的 DOM 的屏幕截图 -

这里是 upgradeElement 调用 -

请注意，MDL 库在未经 React 同意的情况下操纵 DOM。