This is a basic example, and you can see the source code here too .
Please use getmdlbranch
git clone -b getmdl https://gitlab.com/problems/react_router_mdl_js.git
When I use mdl-js-layoutin two components and try to switch from one component to another, the exception throws a console:
REMEMBER: THE DRAWING SHOULD WORK
I am trying to create a reactive component MdlLayoutand callupgradeDom
componentDidUpdate () {
window.componentHandler.upgradeDom()
}
I try to do it manually
componentDidMount () {
const layout = findDOMNode(this.refs.layout)
window.componentHandler.upgradeElement(layout)
}
componentWillUnmount () {
const layout = findDOMNode(this.refs.layout)
window.componentHandler.downgradeElements(layout)
}
But nothing works. I read several articles about this, such as this , this , this and this
Follow except
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