TypeError：未定义不是对象（评估“ this .__ reactAutoBindMap”）

Question

我正在使用NPM安装的最新版本的react.js。 我已经编写了这段代码，当我通过jsfiddle进行工作时，它可以工作，但是当我在自己的设置中尝试时，它就无法工作。 这是我正在使用的代码：

/** @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尝试访问对象属性时都会出错，例如，如果在上面的代码中我注释掉了所有具有this.something内容的东西，那么该代码就会很好地执行，否则会出现错误：

TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap')

这两个问题似乎都可能与jsx的问题有关，但是我不确定jsx为何会以某些方式起作用，而不能以其他方式起作用。 我可以返回<h1>hello!</h1>而不会发生任何事，但是jsx的其他方面（例如在render中）根本无法工作...拼命的...这是一个错误还是我在做有问题？

--->更新

这是我的gulp文件：

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"
    }
}

Answer 1

我有几乎相同的问题。 试试这个：

 React.render(React.createElement(Count), document.getElementById('container'));

Answer 2

您应该安装Reactify 1.1.x：

"reactify": "~1.1.x"

TypeError：未定义不是对象（评估“ this .__ reactAutoBindMap”）

问题描述

2 个解决方案

解决方案1
0 2015-04-03 10:08:07

解决方案2
0 2015-06-17 03:42:01

TypeError：未定义不是对象（评估“ this .__ reactAutoBindMap”）

问题描述

2 个解决方案

解决方案1 0 2015-04-03 10:08:07

解决方案2 0 2015-06-17 03:42:01

解决方案1
0 2015-04-03 10:08:07

解决方案2
0 2015-06-17 03:42:01