인력거 JS 통합과 반작용 JS

Question

를 I 2 개 파일을 가지고 bundle.jsx (성분 반응 포함) 및 app.js 내 모듈 (번들 반응 이내

(JS 빌딩 그래프의 인력거 클래스를 포함하는 기능을 포함). 나는이 구축 나의 JS 파일 내에서

<div id="chart_container" /> 

렌더링 클래스 내에서 jsx는) 내가이 개 파일을로드 할 때, 내가 그래프를 생성 할 것으로 예상

var graph = new Rickshaw.Graph.Ajax({ 
element: document.querySelector("#chart_container"), ... 
} 

문제입니다 div에 때마다 t을 그는 div 구성 요소가 React에 의해 렌더링됩니다. 그러나 내 React 구성 요소가 렌더링되기 전에 내 app.js 파일이 처리되기 때문에 그렇지 않습니다.

이 문제를 해결하는 가장 좋은 해결책은 무엇입니까? 또한 문제가 올바르게 접근하고 있습니까?

x 초 후에 함수를로드하기 위해 app.js에 setTimeout을 추가하려고했습니다. 이는 문제를 해결하고 그래프를 렌더링하지만 React 구성 요소가 x 초 내에 렌더링되지 않거나 x 초보다 훨씬 빠르게 렌더링되기 때문에 바보가 아닙니다.

도움이나 제안이 있으십니까?

Answer 1

당신은 componentDidMount()을 찾고 있습니다. 이 메서드는 구성 요소가 처음 렌더링 된 후에 실행되므로 차트 컨테이너가 있는지 확인할 수 있습니다.

class Example extends React.Component { 
 
    componentDidMount() { 
 
    var graph = new Rickshaw.Graph({ 
 
     element: document.querySelector("#chart_container"), 
 
     width: 300, 
 
     height: 200, 
 
     series: [{ 
 
     color: 'steelblue', 
 
     data: [ 
 
      { x: 0, y: 40 }, 
 
      { x: 1, y: 49 }, 
 
      { x: 2, y: 38 }, 
 
      { x: 3, y: 30 }, 
 
      { x: 4, y: 32 } ] 
 
     }] 
 
    }); 
 

 
    graph.render(); 
 
    } 
 

 
    render() { 
 
    return(
 
     <div id="chart_container" /> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<!-- React --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<!-- React DOM --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<!-- D3 --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<!-- Rickshaw --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.6.0/rickshaw.min.js"></script> 
 

 
<div id="View"></div>