无法读取未定义的属性'__reactAutoBindMap'

在上个星期,我已经完全不知道如何使用React设置服务器端渲染。 这是一个新的项目,但它是一个快速的服务器,我试图渲染一个超级简单的Hello World应用程序使用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; 

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

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

请帮忙!!! :) 谢谢

       

网上收集的解决方案 "无法读取未定义的属性'__reactAutoBindMap'"

我有几乎相同的问题。 我有:

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

其中AppTag需要()到JSX文件。 这使我产生了“不能读取属性'__reactAutoBindMap'未定义的”

我尝试了几件事,但只有这样才解决了我的问题:

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

我希望这会有所帮助

我尝试了更多的东西,这也是有效的:

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

反应v 0.12。*你会得到以下警告

Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory

该链接指出你的代码正在调用你的组件作为一个普通的函数调用,现在已经被弃用了

当你更新反应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' }); } 

或者你可以创build内联的元素

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