代码之家 › 专栏 › 技术社区 › stone rock

在呈现函数(reactjs)中获取错误?

reactjs javascript

stone rock · 技术社区 · 6 年前

我正在尝试将charist.js与react组件一起使用。我无法在react组件中显示饼图。

图表列表.js-> https://gionkunz.github.io/chartist-js/getting-started.html

Pie.js:

import React, { Component } from 'react';

    var data = {
      // A labels array that can contain any sort of values
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      // Our series array that contains series objects or in this case series data arrays
      series: [
        [5, 2, 4, 2, 0]
      ]
    };

    // Create a new line chart object where as first parameter we pass in a selector
    // that is resolving to our chart container element. The Second parameter
    // is the actual data object.
   const mychart =  new Chartist.Line('.ct-chart', data);

class Pie extends Component {

  render(){
    return(
      <div>
          <div class="ct-chart ct-perfect-fourth">
          {mychart}

          </div>
      </div>

    )}

}

export default Pie;

父组件:

render(){
      return(
<div>
      <Pie/>
</div>     
  )
}

我正在将pie.js导入父组件中,但出现错误,说对象应该是数组而不是对象,即 objects are not valid react child . 见截图:

1 回复 | 直到 6 年前

illiteratewriter 6 年前

正如@azium提到的,代码有多个问题,首先是 Reactjs 我们使用 className 而不是使用 class 自从 班 是javascript中的保留关键字。第二,在第一个代码块中,将类名指定为 Chart 并已出口 Pie .

所以要让事情运转起来,首先使用 Chartist for reactjs ,并执行文档中提到的操作(例如添加css)。而不是 import ChartistGraph from '../index'; 你可以做到 import ChartistGraph from 'react-chartist' . 所以一个工作图组件会像这样

import React, { Component } from 'react';
import ChartistGraph from 'react-chartist'
    var data = {
      // A labels array that can contain any sort of values
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      // Our series array that contains series objects or in this case series data arrays
      series: [
        [5, 2, 4, 2, 0]
      ]
    };
    var data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      series: [
        [5, 2, 4, 2, 0]
      ]
    };
    var options = {
      high: 10,
      low: -10,
      axisX: {
        labelInterpolationFnc: function(value, index) {
          return index % 2 === 0 ? value : null;
        }
      }
    };
    var type = 'Bar'
class Pie extends Component {
  render(){
    return(
      <div>
        <ChartistGraph data={data} options={options} type={type} />
      </div>
    )}
}
export default Pie;