使用react

Question

我创建了一个小型反应程序来显示散点图谷歌图表。我共有3个文件： - a）index.html b）main.js渲染我的scatterChart＆amp; c）ScatterChart.js，它是我的main.js呈现的反应组件 ScatterChart.js看起来像：

export default class PieChart extends React.Component {
	
constructor(){
		super();
		var myOptions = {
        title: 'Age vs. Weight comparison',
        hAxis: {title: 'Age', minValue: 0, maxValue: 15},
        vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
        legend: 'none'
    };
 
    var myData = [
       	['Age', 'Weight'],
       	[ 8,      12],
       	[ 4,      5.5],
       	[ 11,     14],
       	[ 4,      5],
       	[ 3,      3.5],
       	[ 6.5,    7]
    ];
   
   	 this.state={
       	data : myData,
       	options : myOptions
      };
 
	}


render() {
	return(
	        <Chart chartType = "ScatterChart" data = {this.state.data} options = {this.state.options} graph_id = "ScatterChart"  width={"100%"} height={"400px"}  legend_toggle={true} />
	      
      );
 }}

这会返回以下错误： 未捕获的不变违规：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。检查ScatterChart的渲染方法。

Answer 1

您在渲染方法中使用<Chart /> - 组件，但至少您的示例并未显示您在任何位置定义它，例如import。

import Chart from "./foochart.jsx";

Answer 2

我使用了 react-google-charts npm模块
请导入您需要的模块。

import {Chart} from 'react-google-charts';
export default class GoogleChart extends React.Component {
constructor() {
    super();


    var columns=   [{
                        'type' : 'date',
                        'label' : 'Month'
                    },
                    {
                        'type': 'number',
                        'label' : 'Count'
                    } 

                    ];
        var rows = [
                    [ new Date(2015, 0),  20    ],
                    [ new Date(2015, 4), 30     ],
                    [ new Date(2015, 6), 20    ],
                    [ new Date(2015,9),  28    ],
                    [  new Date(2015, 11), 58    ]
             ];

        this.state={

                'rows':rows,
                'columns':columns,
                'chartType': "LineChart",
                'div_id': "AirPassengers",
                options : {title: "XXX Perfomance Index"}
        }

}

render() {

    return (

            <Chart chartType={this.state.chartType} width={"700"} height={"500"} rows={this.state.rows} columns={this.state.columns} options = {this.state.options} graph_id={this.state.div_id}  />                                          
        );
}

}

使用属性data:{}的方法在column:['xx']中需要<Chart/>属性，因为有条件检查列的长度，并且它要求列的长度为1或更多。