在 React 中使用 Dygraph 和 redux？答案

【问题标题】：Using Dygraph in React with redux?在 React 中使用 Dygraph 和 redux？
【发布时间】：2017-11-20 12:26:59
【问题描述】：

我在 React 中实现 Dygraph 时遇到了很多麻烦（我正在使用 redux）：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)

当我在本地构建和运行它时，控制台中出现错误（当我尝试查看图表时）：

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)

如果有人能弄清楚发生了什么，或者给我一个提示，那将非常感激。我特别想使用 dygraph 而不是 google 图表或其他反应图表（我已经很容易地工作了），但是，关于 React 中的 dygraph 实现的信息很少，我真的不明白为什么它不起作用。

【问题讨论】：

标签： javascript reactjs react-router react-redux dygraphs

【解决方案1】：

问题在于这一行：

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

尝试在 ID 为 graphContainer 的元素中创建 Dygraph。但是没有具有该 ID 的元素，因此失败。

你需要等到 React 在 DOM 中创建一个 div 才能创建 dygraph。您需要在 componentDidMount 中实例化 Dygraph：

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 */
        });
    }
}

【讨论】：