javascript - 渲染函数(reactjs)出现错误？

Question

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

Chartist.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，但收到错误消息，指出对象应该是数组而不是对象，即 对象不是有效的 react 子组件。看截图:

Answer 1

正如@azium提到的，代码存在多个问题，首先在Reactjs中，我们使用className而不是使用class，因为class 是 javascript 中的保留关键字。其次，在第一个代码块中，您将类名称指定为 Chart 并导出了 Pie。

因此，要启动并运行，首先使用 Chartist for reactjs ，并执行文档中提到的操作(例如添加 css)。您可以import ChartistGraph from 'react-chartist'，而不是import ChartistGraph from '../index';。所以一个工作的图表组件看起来像这样

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;

还将其添加到您的父组件中。