Question

我正在做一个学校项目。使用Reactjs。我的侧面板包括一个提供2个选项的下拉框

“实时”-显示实时图形
“已处理”-显示另一个通过导入特定JSON文件创建的图形。

这是我拥有的SidePanel.js。我确实有一个用于该图的Graph.js，以及一个将ConsidePanel和Graph放在一起的GraphContainer.js。

我是React的新手，所以我的代码不好又草率。

如果这个问题重复，请告诉我。我也不常去Stackoverflow，所以如果有什么我可以改善的工作，请告诉我！感谢您的时间！

import React, { Component } from 'react';
import './SidePanel.css'

class SidePanel extends Component {

    constructor (props){
        super(props)

        this.state = {}
        this.handleChange = this.handleChange.bind(this);
    }


    handleChange(event) {
    this.setState({value: event.target.value});
    }

    render() {
        return(
            <div className="SideContainer">

                <div className="upSide">
                    <h4>Information</h4>
                        <ul>
                            <li>Device:  <b>Device 1</b></li>
                            <li>Status:  <b>Connected</b></li>
                        </ul>
                </div>

                <div className="downSide">
                    <form>
                      <label>
                        <h4>Options</h4>
                            <select value={this.state.value} onChange={this.handleChange}>
                              <option value="live">Live</option>
                              <option value="processed">Processed</option>
                            </select>
                      </label>
                    </form>
                </div> 

            </div>
        );
    }
}

export default SidePanel;

所以我要做的是将GraphContainer.js包含Graph和SidePanel，所以GraphContainer.js应该没什么大不了的。

这是我的Graph.js：

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import socketIOClient from "socket.io-client";
import {
  HighchartsChart, Chart, withHighcharts, XAxis, YAxis, Title, Legend, LineSeries
} from 'react-jsx-highcharts';
import './Graph.css'
var jsonData = import '../jsonData.json'
//pass the json file location

class Graph extends Component {

  constructor (props) {
    super(props);
    this.addDataPoint = this.addDataPoint.bind(this);

    const now = Date.now();
    this.state = {
        data: []
    }
  }

  componentDidMount() {

    //GRAPH 1: Here is to somehow put JSONdata
    console.log(jsonData)


    //GRAPH 2: Here is taking data from socket for testing
    var sensorSerial = this.props.match.params.sensorId
    const socket = socketIOClient("http://localhost:5001/test");
    socket.on("newnumber", data => this.addDataPoint(data));

  }

  addDataPoint(data){

    if(data.sensorSerial == this.props.match.params.sensorId){

      var newData = this.state.data.slice(0)
      console.log(new Date(data.dateTime.split(' ').join('T')))
      newData.push([new Date(data.dateTime.split(' ').join('T')), data.number])

      this.setState({
        data: newData
      })
    }

  }

  render() {

    // const {data} = this.state;
    // console.log(new Date("2019-04-04T10:55:08.841287" + Z))

    const plotOptions = {
      series: {
        pointStart: new Date("2019-04-04T10:55:08.841287Z")
      }
    }

    return (
      <div className="graph">

        <HighchartsChart plotOptions={plotOptions}>
          <Chart />

          <Title>Data</Title>

          <Legend layout="vertical" align="right" verticalAlign="middle" >
            <Legend.Title>Legend</Legend.Title>
          </Legend>

          <XAxis type="datetime">
            <XAxis.Title>Time</XAxis.Title>
          </XAxis>

          <YAxis>
            <YAxis.Title>Y-axis</YAxis.Title>
            <LineSeries name="Channel 1" data={this.state.data}/>
          </YAxis>

        </HighchartsChart>
      </div>
    );
  }
}

export default withHighcharts(Graph, Highcharts);

这是我要测试的示例JSON文件：

{
    "data": [
        {"datetime": "", "data": [1,2,3,4]},
        {"datetime": "", "data": [1,2,3,4]}
    ]
}

Answer 1

您可以像这样使用条件渲染（注意//是注释）。

    render(){
      let {value } = this.state  // we are using destructuring here to get the value 
                                 // property - if are you using babel , so you can 
                                 // use ES6 syntax for your Javascript code ? If not
                                  // just use this.state.value
                                 // from state or you could just use this.state.value

    let data = value !== 'live ' ? this.getJSONdata() : this.getLiveData()
  // Call functions to get the data depending on the value - see below
    return (
      // wherever in your jsx you want to display your graph
      <Graph data={data} />
    )

  }

因此，在render函数上方，您需要具有要使用getJSONdata和getLiveData的两个函数

它们将具有以下语法（同样，Im使用箭头功能（ES6语法））

getJSONData = () => // get your data
                    // or not es6 sytax
getJSONData = function() {}

如果您让我知道如何获取数据，那么我会帮助您如何最好地获取数据。

根据下拉选择更改不同的图

1 个答案: