我试图用我的项目中发生反应，chartjs，但它似乎没有工作...阵营-chartjs不工作
我使用的反应路由器加载这个页面（家） ：
import React from 'react';
import { TextField, RaisedButton } from 'material-ui';
import { History } from 'react-router';
import Chart from './widgets/Chart.js';
const Home = React.createClass({
getInitialState() {
return {
};
},
componentDidMount() {
},
toggleNotification() {
},
render() {
return (
<div>
<Chart/>
</div>
)
}
});
export default Home;和图表是指本文件：
import React from 'react';
import Chart from 'chart.js';
import {LineChart} from 'react-chartjs';
function rand(min, max, num) {
var rtn = [];
while (rtn.length < num) {
rtn.push((Math.random() * (max - min)) + min);
}
return rtn;
}
const ChartWidget = React.createClass({
getInitialState() {
return {
chartData : {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [5, 8, 2, 0, 1, 2, 0]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [-2, -5, 0, -3, -1, 0, -1]
}
]
}};
},
componentDidMount() {
},
toggleNotification() {
},
render() {
return (
<LineChart data={this.state.chartData} redraw width="600" height="250" />
)
}
});
export default ChartWidget;错误我越来越：
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 ChartWidget .warning @ vendor.bundle.js:11125ReactElementValidator.createElement @ vendor.bundle.js:27927render @ app.bundle.js:29792(anonymous function) @ app.bundle.js:407ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ vendor.bundle.js:14599ReactCompositeComponentMixin._renderValidatedComponent @ vendor.bundle.js:14619wrapper @ vendor.bundle.js:11394ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14232wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactMultiChild.Mixin.mountChildren @ vendor.bundle.js:22652ReactDOMComponent.Mixin._createContentMarkup @ vendor.bundle.js:19830ReactDOMComponent.Mixin.mountComponent @ vendor.bundle.js:19718ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactMultiChild.Mixin.mountChildren @ vendor.bundle.js:22652ReactDOMComponent.Mixin._createContentMarkup @ vendor.bundle.js:19830ReactDOMComponent.Mixin.mountComponent @ vendor.bundle.js:19718ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactMultiChild.Mixin.mountChildren @ vendor.bundle.js:22652ReactDOMComponent.Mixin._createContentMarkup @ vendor.bundle.js:19830ReactDOMComponent.Mixin.mountComponent @ vendor.bundle.js:19718ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactMultiChild.Mixin.mountChildren @ vendor.bundle.js:22652ReactDOMComponent.Mixin._createContentMarkup @ vendor.bundle.js:19830ReactDOMComponent.Mixin.mountComponent @ vendor.bundle.js:19718ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542mountComponentIntoNode @ vendor.bundle.js:8912Mixin.perform @ vendor.bundle.js:13649batchedMountComponentIntoNode @ vendor.bundle.js:8928Mixin.perform @ vendor.bundle.js:13649ReactDefaultBatchingStrategy.batchedUpdates @ vendor.bundle.js:19229batchedUpdates @ vendor.bundle.js:13154ReactMount._renderNewRootComponent @ vendor.bundle.js:9122wrapper @ vendor.bundle.js:11394ReactMount._renderSubtreeIntoContainer @ vendor.bundle.js:9196ReactMount.render @ vendor.bundle.js:9216wrapper @ vendor.bundle.js:11394(anonymous function) @ app.bundle.js:280(anonymous function) @ app.bundle.js:285(anonymous function) @ app.bundle.js:286__webpack_require__ @ vendor.bundle.js:1051fn @ vendor.bundle.js:596(anonymous function) @ app.bundle.js:7__webpack_require__ @ vendor.bundle.js:1051webpackJsonpCallback @ vendor.bundle.js:22(anonymous function) @ app.bundle.js:1 vendor.bundle.js:9781 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ChartWidget .
只能告诉我，我做错了什么？
使用：
的WebPack
Hotloaders
React.js
阵营路由器
反应，chartjs 材料的UI
你应该给阵营chart.js之2试试 –