React - React.createElement：type不應為null，undefined，boolean

Question

我是新手，對渲染元素有所反應。 我有一個熱圖組件，我從外部腳本獲取代碼，並從我的主要組件調用它。 看起來我錯過了一些要傳遞的參數或者我正在返回元素的錯誤。

我有一個Heatmap組件：

 var React = require("react"); var ReactDOM = require("react-dom"); var AmCharts = require("amcharts3-react"); // Generate random data function generateData() { var firstDate = new Date(); var dataProvider = []; for (var i = 0; i < 100; ++i) { var date = new Date(firstDate.getTime()); date.setDate(i); dataProvider.push({ date: date, value: Math.floor(Math.random() * 100) }); } return dataProvider; } // Component which contains the dynamic state for the chart var Chart = React.createClass({ getInitialState: function () { return { dataProvider: generateData(), timer: null }; }, componentDidMount: function () { var self = this; self.setState({ // Update the chart dataProvider every 3 seconds timer: setInterval(function () { self.setState({ dataProvider: generateData() }); }, 3000) }); }, componentWillUnmount: function () { clearInterval(this.state.timer); }, render: function () { // Render the chart return React.createElement(AmCharts, { "path": "node_modules/amcharts3/amcharts", "type": "serial", "theme": "light", "marginRight": 40, "marginLeft": 40, "autoMarginOffset": 20, "mouseWheelZoomEnabled": true, "valueAxes": [{ "id": "v1", "axisAlpha": 0, "position": "left", "ignoreAxisWidth": true }], "balloon": { "borderThickness": 1, "shadowAlpha": 0 }, "graphs": [{ "id": "g1", "balloon":{ "drop": true, "adjustBorderColor": false, "color":"#ffffff" }, "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, "title": "red line", "useLineColorForBulletBorder": true, "valueField": "value", "balloonText": "<span style='font-size:18px;'>[[value]]</span>" }], "chartScrollbar": { "graph": "g1", "oppositeAxis": false, "offset":30, "scrollbarHeight": 80, "backgroundAlpha": 0, "selectedBackgroundAlpha": 0.1, "selectedBackgroundColor": "#888888", "graphFillAlpha": 0, "graphLineAlpha": 0.5, "selectedGraphFillAlpha": 0, "selectedGraphLineAlpha": 1, "autoGridCount": true, "color":"#AAAAAA" }, "chartCursor": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha":1, "cursorColor":"#258cbb", "limitToGraph":"g1", "valueLineAlpha":0.2, "valueZoomable": true }, "valueScrollbar":{ "oppositeAxis": false, "offset":50, "scrollbarHeight":10 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "dashLength": 1, "minorGridEnabled": true }, "dataProvider": this.state.dataProvider }); } }); 

我從我的主要組件中調用它：

 import React from "react" import Heatmap from "../../Elements/AmCharts/Heatmap" ... export default class Stats extends React.Component { render() { return ( .... <Heatmap /> .... ) } } 

我收到一條錯誤，說warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Stats. warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Stats.

並且

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Stats.

有什么辦法可以解決嗎？

Answer 1

您需要導出組件：

export default Chart = React.createClass({