无法读取未定义的属性“__reactAutoBindMap”答案

【问题标题】：Cannot read property '__reactAutoBindMap' of undefined无法读取未定义的属性“__reactAutoBindMap”
【发布时间】：2015-06-01 22:37:39
【问题描述】：

在过去的一周里，我完全不知道如何使用 React 设置服务器端渲染。这是一个新项目，但它是一个快速服务器，我正在尝试渲染一个超级简单的 hello world react 应用程序，它使用 react-router-component..

我认为获得帮助的最佳方式是分享我现在拥有的代码，我希望有人能告诉我我做错了什么！我一个接一个地按照教程学习并尝试了各种不同的方法，但我不断出错！

这是我的快递服务器的 app.js，如果你向下滚动一下，相关代码就是 * 路由：

require('node-jsx').install({extension: '.jsx'});
var React = require('react');

var App = require('./src/App.jsx');

var request = require('superagent');
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var url = require('url');

//Database and Passport requires
var mongoose = require('mongoose');
var passport = require('passport');
var LocalStrategy = require('passport-local');

// var api = require('./routes/api');

var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('express-session')({
  secret: 'secret',
  resave: false,
  saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(path.join(__dirname, 'public')));

//passport config
var Account = require('./models/account');
passport.use(new LocalStrategy(Account.authenticate()));
passport.serializeUser(Account.serializeUser());
passport.deserializeUser(Account.deserializeUser());

//mongoose
mongoose.connect('mongodb://localhost/database');

//THIS is the relevant section that renders React and sends to client
app.get('*', function(req, res, next){
  var path = url.parse(req.url).pathname;
  React.renderToString(
    React.createFactory(App({path : path})),
    function(err, markup) {
      res.send('<!DOCTYPE html>' + markup);
    }
  );
});


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

app.js 文件中需要的 App.jsx 文件：

/**
 * @jsx React.DOM
 */

var React = require('react');
var Router = require('react-router-component');
var Locations = Router.Locations;
var Location = Router.Location;
var Index = require('./components/Index.jsx');


var App = React.createClass({
    render: function() {
        return (
              <html>
                <head lang="en">
                    <meta charSet="UTF-8"/>
                    <title>React App</title>
                </head>
                <body>
                    <div id="main">
                        <Locations path={this.props.path}>
                            <Location path="/" handler={Index} />
                        </Locations>
                    </div>
                    <script type="text/javascript" src="./javascripts/bundle.js"></script>
                </body>
               </html>
        )
    }
});

module.exports = App;

以及App.jsx中需要的Index.jsx文件：

var React = require('react');

 var Index = React.createClass({
    render: function() {
        return (
        <div className="test">
            <span>Whats going on</span>
        </div>
        )
    }
 });

 module.exports = Index;

我只是向你展示了我最近尝试让这个在这里工作，但请放心，我已经尝试了所有不同的方法来渲染一个 react 组件，例如 renderComponentToString，我也尝试过 React.renderToString(React.renderToString(React.renderToString)。 createElement(App)) 等等等等。

但现在我不断收到此错误“无法读取未定义的属性 '__reactAutoBindMap'”

请帮忙！！！ :) 谢谢

【问题讨论】：

React.createFactory(App({path : path})) 应该是：React.createElement(App({path : path}))
关闭，但 props 必须作为第二个参数传递给 React.createElement。 React.createElement(App, {path : path})
正如@Morhaus 所说 - 将道具移动到第二个参数为我在 v0.13 中修复了这个错误。

标签： javascript node.js express reactjs reactjs-flux

【解决方案1】：

我几乎有同样的问题。我有：

 React.render(AppTag(config), node);

AppTag 是 JSX 文件的 require() 的位置。这使我“无法读取未定义的属性'__reactAutoBindMap'”

我尝试了一些东西，但只有这样解决了我的问题：

 React.render(React.createElement(AppTag, config), node);

我希望这会有所帮助

我尝试了更多的东西，这也有效：

 React.render(React.createFactory(AppTag)(config), node)

【讨论】：

在服务器上渲染静态标记，这对我有用： var appHtml = ReactDOMServer.renderToStaticMarkup(React.createFactory(App)());

【解决方案2】：

在 react v 0.12.* 中，您将收到以下警告：

警告：有些东西直接调用了 React 组件。请改用工厂或 JSX。见：http://fb.me/react-legacyfactory

link 声明您的代码将您的组件作为普通函数调用调用，现在已弃用

但是，当您更新到 react v 0.13.* 时，这将不再起作用

您将有 2 个升级选项：

使用 JSX

React 组件不能再像这样直接调用了。相反，您可以使用 JSX：

var React = require('react');
var MyComponent = require('MyComponent');

function render() {
  return <MyComponent foo="bar" />;
}

没有 JSX

如果你不想或者不能使用 JSX，那么你需要在调用它之前将你的组件包装在一个工厂中

var React = require('react');
var MyComponent = React.createFactory(require('MyComponent'));

function render() {
  return MyComponent({ foo: 'bar' });
}

或者你可以创建内联元素

function render(MyComponent) {
  return React.createElement(MyComponent, { foo: 'bar' });
}

【讨论】：