reduxでのダイアグラフの使用？

Question

私はリアクト（私はレフィックスを使用しています）でダイグラフを実装するのに苦労しています：http://dygraphs.com/。 NPMのDygraphラッパーパッケージは機能していないようです。

はまた、私は単純に使用することはできません。

<div id="graph"></div>. 

私が代わりに実際のindex.htmlファイルの状態で作業を反応させるためであると考えています。

だから私は現在、使用しようとしている方法は、グラフコンポーネントを作成することです。その後、

import React, { Component } from 'react'; 
import Dygraph from 'dygraphs'; 
import myData from '../../mockdata/sample-data.json'; 
import 'dygraphs/dist/dygraph.min.css' 
import './graphComponent.css'; 

class DyGraph extends Component { 

    constructor(props) { 
     super(props); 
     // mock json data for graph 
     const messages = myData; 

     var data = ""; 
     messages.forEach((response) => { 
      data += response[0] + ',' + response[1] + "\n"; 
     }); 

     new Dygraph('graphContainer', data, { 
      title: 'Pressure Transient(s)', 
      titleHeight: 32, 
      ylabel: 'Pressure (meters)', 
      xlabel: 'Time', 
      gridLineWidth: '0.1', 
      width: 700, 
      height: 300, 
      connectSeparatedPoints: true, 
      axes: { "x": { "axisLabelFontSize": 9 }, "y": { "axisLabelFontSize": 9 } }, 
      labels: ['Date', 'Tampines Ave10 (Stn 40)'], 

     }); 
    } 

    render() { 
     return <div></div> 
    } 
} 
export default DyGraph; 

とにインポート：

import React, { Component } from 'react'; 
import DyGraph from './components/graph/graphComponent'; 
import './App.css'; 
class DeviceDetails extends Component { 

    render() { 
     return (
       <div > 
        <DyGraph /> 
       </div> 
     ); 
    } 
} 
export default DeviceDetails; 

と表示状態は、あなたがあればということがあります何かをクリックしてください：

import React, { PropTypes } from 'react' 
import { connect } from 'react-redux' 

import WarningView from '../warning/warningView' 
import DirectoryView from '../directory/directoryView' 
import DeviceDetailView from '../devicedetails/devicedetails' 


export const Display = ({ currentPage }) => { 

    switch(currentPage) { 
     case 'WARNING_PAGE': 
      return <WarningView/>; 
     case 'DIRECTORY_PAGE': 
      return <DirectoryView/>; 
     case 'SENSOR_PAGE': 
      return <DeviceDetailView/>; 
     default: 
      return <WarningView/>; 
    } 
}; 

Display.propTypes = { 
    currentPage: PropTypes.string.isRequired, 
}; 

export default connect(
    (state) => ({ currentPage: state.currentPage }), 
    (dispatch) => ({ }) 
)(Display) 

これをローカルでビルドして実行すると、コンソールにエラーが表示されますE（Iグラフを参照してみてください）：

Uncaught (in promise) Error: Constructing dygraph with a non-existent div! 
    at Dygraph.__init__ (dygraph.js:217) 
    at new Dygraph (dygraph.js:162) 
    at new DyGraph (graphComponent.js:19) 
    at ReactCompositeComponent.js:295 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294) 
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188) 
    at Object.mountComponent (ReactReconciler.js:46) 
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238) 

誰もが何が起こっているかを把握、さらには私すっごく理解されるだろうヒントを与えることができます。私は具体的には、Googleグラフや他の反応チャート（私は非常に簡単に作業しています）の代わりにダイグラフを使用したいと思いますが、Reactのダイグラフ実装に関する情報はほとんどなく、なぜうまくいかないのかわかりません。

new Dygraph('graphContainer', data, { ... }) 

はID graphContainerを持つ要素にDygraphを作成しようとします：

Answer 1

問題は、このラインということです。しかし、そのIDを持つ要素は存在しないため、失敗します。

ReactがDOMにdivを作成してグラフを作成するまで待つ必要があります。ダイグラフをインスタンス化するには、componentDidMount：

class Dygraph extends Component { 
    render() { 
     return <div ref="chart"></div>; 
    } 


    componentDidMount() { 
     const messages = myData; 

     var data = ""; 
     messages.forEach((response) => { 
      data += response[0] + ',' + response[1] + "\n"; 
     }); 

     new Dygraph(this.refs.chart, data, { 
      /* options */ 
     }); 
    } 
}