无法读取未定义的属性“__reactAutoBindMap”
Posted
技术标签:
【中文标题】无法读取未定义的属性“__reactAutoBindMap”【英文标题】：Cannot read property '__reactAutoBindMap' of undefined 【发布时间】：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 中修复了这个错误。
【参考方案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-legacyfactorylink 声明您的代码将您的组件作为普通函数调用调用，现在已弃用
但是，当您更新到 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' );
【讨论】：
以上是关于无法读取未定义的属性“__reactAutoBindMap”的主要内容，如果未能解决你的问题，请参考以下文章
NextJS：未捕获的类型错误：无法读取未定义的属性（读取“属性”）