使用react渲染谷歌图表时的Unaught Invariant违规

Question

我创建了一个小的react程序来显示谷歌散点图。我总共有3个文件：a） index.html b）main.js，它呈现了我的散点图&c） ScatterChart.js是我的main.js渲染的一个react组件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

我使用过反应谷歌图表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:{}的方法需要<Chart/>中的column:['xx']属性，因为存在检查列长度的条件，并且它要求列长度为一个或多个。