React : 빈 자리 표시 자 div가 다시 렌더링되어 자식을 제거함 (비동기 첨부 차트)

Question

각 위젯의 내용으로 DC.JS 차트가있는 위젯 대시 보드에서 작업 중입니다.

<div id={"content_" + this.props.id} className="widgetContent"> /* chart is later drawn here */ </div>) 

dc.js를 나중에 ID로 DIV 선택되고 자식으로 그 SVG 차트를 첨부 :

위젯 반응 그리드 레이아웃 이런 빈 자리 노드를 작성을 를 사용하여 제거/만든 .

문제는 위젯의 정적 또는 변경 ID를 토글하는 것과 같이 위젯을 다시 렌더링하여 기존 차트 (하위)를 위와 같이 새로운 빈 자리 표시 자 div로 "덮어 씁니다"라는 점입니다.

제 질문은 해당 문제를 React-techniques ()에서 다시 작성하지 못하도록을 수정하지 못하게 할 수 있습니까? 또는 이것이 라이브러리 자체의 문제인 경우 제 질문입니다.

매우 유사한 코드는 here입니다. 실행중인 코드는 here입니다. line 44에 위의 스 니펫 선 (나중에 차트가 첨부되는 빈 차트 자리 표시 자)을 상상해보십시오.

Answer 1

여기서 일반적인 해결책은 shouldComponentUpdate이 false로 설정된 구성 요소에이 차트를 래핑하는 것입니다. 그렇게하면 차트 라이브러리가 수정하는 요소가 절대 변경되지 않습니다. 랩퍼 구성 요소의 예는 아래를 포함하여

var React = require('react/addons'); 
var ReactIgnore = { 
    displayName: 'ReactIgnore', 
    shouldComponentUpdate(){ 
     return false; 
    }, 

    render(){ 
     return React.Children.only(this.props.children); 
    } 
}; 

module.exports = { 
    Class: ReactIgnore, 
    Component: React.createClass(ReactIgnore) 
}; 

(아래를 포함하여) here