반응 + 반응 라우터가 DOMException을 던질 때 getmdl 사용

반응 + 반응 라우터가 DOMException을 던질 때 getmdl 사용

이것은 기본적인 예로서 당신은 여기서 그리고 여기서 실행 중인 소스 코드를 볼 수 있다.

제발, 사용해줘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)
}

하지만 아무 것도 효과가 없다.그것과 관련된 기사들을 몇 개 읽었는데, 이것, 이것, 이것 저것.

예외를 따르십시오.

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

여기서의 문제는 바로 ''이''라는 점이다.upgradeElement그리고downgradeElementAPI는 리액션에 의해 생성된 DOM 요소를 수정하여, 조정 단계에서 예외를 발생시켜 View1 경로 구성요소를 뷰2 경로 구성요소(또는 그 반대)로 대체하려고 시도한다.당신은 이 APIs 호출을 언급함으로써 이 이론을 확인할 수 있다.MdlLayout.jsx경로를 바꿀 때 더 이상 오류가 없을 겁니다

DOM에서 직접 작업하려는 라이브러리는 Reaction으로 즉시 작동하지 않는다.가능한 해결 방법을 보려면 이 글과 이 글을 읽어보십시오.

업데이트:

여기 MDL 호출을 코멘트한 프로젝트 포크, 체크아웃temp프로젝트에서 분기하여 코드를 실행하십시오.라우터는 예상대로 작동한다.

DOM 조작에 대해서는 MDL 통화 없이 DOM의 스크린샷을 보시죠.

그리고 여기 그 다음이 있다.upgradeElement-를 부르다

MDL 라이브러리가 Resact의 동의 없이 DOM을 조작하고 있다는 점에 유의하십시오.

참조URL: https://stackoverflow.com/questions/43268185/use-getmdl-with-react-react-router-throw-a-domexception