我有新的反应和渲染元素的问题。我有一个热图组件,我从外部脚本获取代码,并从我的主组件调用它。看起来我错过了一些要传递的参数或错误的方式我返回元素。
我有一个热图组件:
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
});
}
});
&#13;
我是从我的主要组件调用它:
import React from "react"
import Heatmap from "../../Elements/AmCharts/Heatmap"
...
export default class Stats extends React.Component {
render() {
return (
....
<Heatmap />
....
)
}
}
&#13;
我收到错误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.
有没有办法解决它?
答案 0 :(得分:0)
您需要导出组件:
export default Chart = React.createClass({