Highstocks 组件反应错误答案

【问题标题】：Highstocks component react errorHighstocks 组件反应错误
【发布时间】：2018-01-14 05:51:18
【问题描述】：

在我的 react 项目中使用 highstocks 时出现以下错误。在这里附上错误和代码。请帮助摆脱这个错误。

错误对象作为 React 子对象无效（找到：带有键的对象（某些属性）。如果您要呈现子对象的集合，请改用数组。在图表中

App.js

import React, { Component } from 'react';
import Charts from './Components/Charts.js';

class App extends Component {
  render() {
    return (
      <div>
         <Charts/>
      </div>
    );
  } 
}

export default App;

Charts.js

import HighCharts from 'highcharts/highstock';
import React, { Component } from 'react';

class Charts extends Component {
render() {
  var data =  [
    [Date.UTC(2006, 0, 29, 0, 0, 0), 30.14],
    [Date.UTC(2006, 0, 29, 1, 0, 0), 34.76],
    [Date.UTC(2006, 0, 29, 2, 0, 0), 34.34],
    [Date.UTC(2006, 0, 29, 3, 0, 0), 33.9]
  ];
  return (
    HighCharts.stockChart('root', {
    rangeSelector: {
        selected: 0
    },
    title: {
        text: 'USD to EUR exchange rate'
    },
    tooltip: {
        style: {
            width: '100%'
        },
        valueDecimals: 4,
        shared: true
    },
    yAxis: {
        title: {
            text: 'Exchange rate'
        }
      },
       series: [{
            name: 'USD to EUR',
            data:data,
            id: 'dataseries'        
         }]
      })
   )}
}

export default Charts;

【问题讨论】：

但 HighCharts.stockChart 实际返回的是什么？
如果 'root' 是 DOM 模型中某处的选择器，那么渲染代码实际上应该转到 componentDidMount.. 用生成的 div 的 ref 替换硬编码的 'root' 会好得多通过您的render() 方法。如果您仍然想在render 中包含此代码，那么只需让它返回 null
感谢丹尼尔，根 div 在我的 index.html 中，我可以在其中渲染所有组件，能否请您提供重写的代码，以便我能理解？提前致谢。
highCharts.stockChart 用代码中给出的数据返回一个股市图表，
对不起，它看起来不像那样，很可能它只是简单地绘制它并返回某种对它的引用。 React 也不会呈现股票图表，它只会呈现 JSX 语句以及它们转换为的内容......

标签： javascript reactjs highcharts

【解决方案1】：

大概是这样......理想情况下，数据应该与道具一起到达

class Charts extends Component {


  constructor(props) {
    super(props);

    this.state = {
      data: [
        [Date.UTC(2006, 0, 29, 0, 0, 0), 30.14],
        [Date.UTC(2006, 0, 29, 1, 0, 0), 34.76],
        [Date.UTC(2006, 0, 29, 2, 0, 0), 34.34],
        [Date.UTC(2006, 0, 29, 3, 0, 0), 33.9]
      ]
    };
  }

  setRef = ref => {
    if (!this.ref) {
      this.ref = ref;
    }
  }

  componentDidMount() {


    HighCharts.stockChart(this.ref, {
      rangeSelector: {
        selected: 0
      },
      title: {
        text: 'USD to EUR exchange rate'
      },
      tooltip: {
        style: {
          width: '100%'
        },
        valueDecimals: 4,
        shared: true
      },
      yAxis: {
        title: {
          text: 'Exchange rate'
        }
      },
      series: [{
        name: 'USD to EUR',
        data: data,
        id: 'dataseries'
      }]
    })


  }

  render() {

    return (
      <div ref={this.setRef} />
    );


  }
}

export default Charts;

【讨论】：

我没有一个工作示例，很可能 ref 没有正确输入。您应该只检查 this.ref 是否存在于 componentDidMount 中。它应该但谁知道
这是我的 index.js 从 'react' 导入 React；从“react-dom”导入 ReactDOM；导入'./index.css'；从'./App'导入应用程序；从'./registerServiceWorker'导入registerServiceWorker； ReactDOM.render(

, document.getElementById('root')); registerServiceWorker();
嗨丹尼尔，我已经修好了。我已将 Highstock.cockchart 分配给一个变量并在渲染方法中返回它。