不能将 npm 模块 react-chartjs 与 React 一起使用
Cannot use npm module react-chartjs with React
我是 npm 和 React 的新手。我有一个使用 React UI 的应用程序,我想包含一些使用 react-chartjs.
的图表
在我的 app.jsx 文件中,我尝试创建一个条形图:
var BarChart = require("react-chartjs").Bar;
var chartData = {
...
};
var CategorySummaryGraph = React.createClass({
render: function() {
return (
<BarChart data={chartData} width="600" height="250"/>
);
}
});
我使用 gulp 和 browserify 进行捆绑:
var gulp = require('gulp');
var react = require('gulp-react');
var browserify = require('gulp-browserify');
gulp.task('bundle-jsx', function() {
return gulp.src('./myapp/static/jsx/*.jsx')
.pipe(react())
.pipe(browserify())
.pipe(gulp.dest('./myapp/static/js/'));
});
在浏览器中加载页面时出现错误:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
invariant @ react.js:18405
ReactOwner.addComponentAsRefTo @ react.js:13256
attachRef @ react.js:14174
ReactRef.attachRefs @ react.js:14190
attachRefs @ react.js:14051
assign.notifyAll @ react.js:1045
ON_DOM_READY_QUEUEING.close @ react.js:13934
Mixin.closeAll @ react.js:16693
Mixin.perform @ react.js:16634
batchedMountComponentIntoNode @ react.js:11998
Mixin.perform @ react.js:16620
ReactDefaultBatchingStrategy.batchedUpdates @ react.js:9140
batchedUpdates @ react.js:14853
ReactMount._renderNewRootComponent @ react.js:12133
ReactPerf.measure.wrapper @ react.js:13366
ReactMount.render @ react.js:12222
ReactPerf.measure.wrapper @ react.js:13366
(anonymous function) @ myapp.js:23474
m.Callbacks.j @ jquery-1.11.3.min.js:2
m.Callbacks.k.fireWith @ jquery-1.11.3.min.js:2
m.extend.ready @ jquery-1.11.3.min.js:2
J @ jquery-1.11.3.min.js:2
从错误消息来看,在我看来 BarChart 没有 render 方法...如果 react-chartjs 可以正常工作,这显然不是这种情况。我不确定该去哪里,所以任何帮助将不胜感激。
我通过将 React 包含在我的 html 页面中来定义它:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
解决问题的方法是在我的 .jsx 文件中需要它:
var React = require("react");
不确定为什么会这样,但通过阅读,可能有多个 React 的初始化 and/or 定义导致了冲突。
感谢@Daniel 为我指明了正确的方向。
我是 npm 和 React 的新手。我有一个使用 React UI 的应用程序,我想包含一些使用 react-chartjs.
的图表在我的 app.jsx 文件中,我尝试创建一个条形图:
var BarChart = require("react-chartjs").Bar;
var chartData = {
...
};
var CategorySummaryGraph = React.createClass({
render: function() {
return (
<BarChart data={chartData} width="600" height="250"/>
);
}
});
我使用 gulp 和 browserify 进行捆绑:
var gulp = require('gulp');
var react = require('gulp-react');
var browserify = require('gulp-browserify');
gulp.task('bundle-jsx', function() {
return gulp.src('./myapp/static/jsx/*.jsx')
.pipe(react())
.pipe(browserify())
.pipe(gulp.dest('./myapp/static/js/'));
});
在浏览器中加载页面时出现错误:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
invariant @ react.js:18405
ReactOwner.addComponentAsRefTo @ react.js:13256
attachRef @ react.js:14174
ReactRef.attachRefs @ react.js:14190
attachRefs @ react.js:14051
assign.notifyAll @ react.js:1045
ON_DOM_READY_QUEUEING.close @ react.js:13934
Mixin.closeAll @ react.js:16693
Mixin.perform @ react.js:16634
batchedMountComponentIntoNode @ react.js:11998
Mixin.perform @ react.js:16620
ReactDefaultBatchingStrategy.batchedUpdates @ react.js:9140
batchedUpdates @ react.js:14853
ReactMount._renderNewRootComponent @ react.js:12133
ReactPerf.measure.wrapper @ react.js:13366
ReactMount.render @ react.js:12222
ReactPerf.measure.wrapper @ react.js:13366
(anonymous function) @ myapp.js:23474
m.Callbacks.j @ jquery-1.11.3.min.js:2
m.Callbacks.k.fireWith @ jquery-1.11.3.min.js:2
m.extend.ready @ jquery-1.11.3.min.js:2
J @ jquery-1.11.3.min.js:2
从错误消息来看,在我看来 BarChart 没有 render 方法...如果 react-chartjs 可以正常工作,这显然不是这种情况。我不确定该去哪里,所以任何帮助将不胜感激。
我通过将 React 包含在我的 html 页面中来定义它:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
解决问题的方法是在我的 .jsx 文件中需要它:
var React = require("react");
不确定为什么会这样,但通过阅读,可能有多个 React 的初始化 and/or 定义导致了冲突。
感谢@Daniel 为我指明了正确的方向。