1
我正在使用由NPM安裝的react.js的最新版本。我已經寫了這個代碼，當我通過jsfiddle的時候，但是當我在我自己的設置中嘗試它時，它不起作用。這裏是我正在使用的代碼：TypeError：undefined不是一個對象（評估'this .__ reactAutoBindMap'）
/** @jsx React.DOM */
var React = require('react');
var MyButton = React.createClass({
render: function(){
return (<button onClick={this.props.onClick} >more!</button>);
}
});
var Count = React.createClass({
getInitialState: function(){
return { counter: 0 };
},
increment: function(){
this.setState({
counter: this.state.counter + 1
});
},
render: function(){
return (<div>
<li>{this.state.counter}</li>
<MyButton onClick={this.increment} />
</div>);
}
});
React.render(<Count />, document.getElementById('container'));
，然後我的HTML文件看起來像這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>what the f</title>
</head>
<body>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<script src="js/main.js"></script>
</body>
</html>
在我的瀏覽器我得到一個錯誤說：
"TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap')
(anonymous function)"
和一個警告說：
"Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory"
---->更新：
在搜索確切問題區域後，我遇到兩個具體問題。
答：React.render()函數不接受JSX。
爲了什麼顯示沒有錯誤我必須使用：的React.render(React.createElement(Count), document.getElementById('container'));
代替： React.render(<Count />, document.getElementById('container'));
B.然後我得到一個錯誤，只要我試圖訪問該對象的屬性，例如，如果在上面的代碼中，我註釋掉任何有this.something它那麼代碼執行就好了，否則它給出了錯誤：
TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap')
這兩個問題似乎都可能與jsx的問題有關，但我不確定爲什麼jsx會以某種方式工作，而不是其他問題。我可以毫不遲疑地返回<h1>hello!</h1>，但是jsx的其他方面在渲染時並不起作用......在這裏變得絕望......這是一個bug還是我做錯了什麼？
--->更新
這裏是我的一飲而盡文件：
var connect = require('gulp-connect');
var gulp = require('gulp');
var source = require('vinyl-source-stream'); // Used to stream bundle for further handling
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['app_root/js/main.js'],
transform: [reactify], // convert JSX to javascript
debug: true,
cache: {}, packageCache: {}, fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function() {
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('app_root/js/main.js'))
.pipe(gulp.dest('dist/js'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle()
.pipe(source('app_root/js/main.js'))
.pipe(gulp.dest('dist/js'));
});
// concat app to directory being served
gulp.task('conkat', function(){
gulp.src('/src/dist/app_root/js/main.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'));
});
// copy index.html to served directory
gulp.task('copy', function(){
gulp.src('app_root/index.html')
.pipe(gulp.dest('dist'));
gulp.src('/src/dist/app_root/js/main.js')
});
// watch app directory
gulp.task('watch', function(){
gulp.watch('app_root/**/*.*', ['reload']);
});
// serve the dist directory
gulp.task('serveDist', function(){
connect.server({
root: 'dist'
});
});
// run on change
gulp.task('reload', [ 'browserify','conkat', 'copy' ]);
// run all
gulp.task('default', [ 'browserify', 'conkat','copy', 'serveDist', 'watch' ]);
和我的繼承人package.son：
{
"private": true,
"devDependencies":
{
"gulp":"^3.8.8",
"browserify":"^9.0.6",
"gulp-concat":"^2.4.1",
"react":"^0.13.1",
"reactify":"^0.14.0",
"watchify":"^3.1.0",
"vinyl-source-stream":"^1.1.0",
"react-router":"^0.13.2",
"gulp-connect":"^2.2.0"
}
}
一切都在一個文件中，並聲明以正確的次序宣？ – WiredPrairie 2015-04-03 10:36:52
一切都如你所見，html和javascript/react文件是單獨的文件。 – 2015-04-03 13:18:16
您使用的是哪個版本的React？您是預編譯JSX語法還是依靠瀏覽器轉換它？因爲你從'