Question

我是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并没有一种渲染方法......如果反应 - chartjs完全没有，那么显然情况并非如此。我不知道该去哪里，所以任何帮助都会非常感激。

Answer 1

我通过将其包含在我的html页面中来定义React：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>

解决问题的原因是在我的.jsx文件中要求它：

 var React = require("react");

不确定为什么会这样，但是从阅读开始，可能有多个初始化和/或React的定义导致了冲突。

感谢@Daniel指出我正确的方向。

无法使用npm模块react-chartjs与React

1 个答案: