人力車JSを統合し、私は2つのファイルを持って、bundle.jsx JS

Question

に反応する（コンポーネントに反応含まれています）とapp.js（グラフを構築するための人力車のクラスが含まれてJSの機能を、含まれている）

私は、モジュール（バンドルを反応させ以内。 JSX）クラス内で私は私のjsファイル内で

<div id="chart_container" /> 

をレンダリング私はこの上に構築

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

問題は、私は2つのファイルをロードするとき、私はグラフはいつでもトンを作成することを期待しているDIV 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>