不能使用npm模塊react-chartjs和React

我是npm和React的新手。我有一個使用React UI的應用程序，我想用react-chartjs包含一些圖表。不能使用npm模塊react-chartjs和React

在我app.jsx文件我嘗試創建一個條形圖：

var BarChart = require("react-chartjs").Bar; 
var chartData = { 
    ... 
}; 

var CategorySummaryGraph = React.createClass({ 
    render: function() { 
    return (
     <BarChart data={chartData} width="600" height="250"/> 
    ); 
    } 
});

我捆用杯和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沒有渲染方法...如果react-chartjs工作的話，這顯然不是這種情況。我不知道該去哪裏，所以任何幫助將不勝感激。

來源

2015-06-20 tytk

此錯誤似乎與上述代碼無關。你如何啓動你的React代碼？也許是這樣的：'React.render（，element）;'？或者你是否在某個地方爲渲染方法外的變量分配了一個React組件？ React抱怨''ref在錯誤的上下文中被使用。 – Daniel

我已經定義由包括它在我的HTML頁面陣營：

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

什麼固定的問題是需要它，而不是在我的.jsx文件：

var React = require("react");

不知道爲什麼這個工作但是從閱讀的角度來看，也許有多個初始化和/或React的定義引起了衝突。

感謝@丹尼爾指出我在正確的方向。

來源

2015-06-21 19:02:48 tytk

不能使用npm模塊react-chartjs和React

回答

相關問題