文章/答案/技术大牛

发布

社区首页 >问答首页 >无法读取未定义的属性“”__reactAutoBindMap“”

问无法读取未定义的属性“”__reactAutoBindMap“”
EN

Stack Overflow用户

提问于 2015-03-29 01:36:01

回答 1查看 8.5K关注 0票数 9

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

我认为对我来说获得帮助的最好方法是分享我现在拥有的代码，我希望有人能告诉我我做错了什么！我遵循了一个接一个的教程，尝试了各种不同的东西，但我总是一个接一个地出错！

这是我的express服务器的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.createElement(App))等。

但现在我一直收到这样的错误：“无法读取未定义的属性'__reactAutoBindMap‘”

请帮帮忙！:)谢谢

javascript

node.js

express

reactjs

reactjs-flux

回答 1

Stack Overflow用户

发布于 2015-04-03 18:02:43

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

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

其中AppTag是必需的()到JSX文件。和这个generate me“无法读取未定义的属性'__reactAutoBindMap‘”

我尝试了几种方法，但只有这样才解决了我的问题：

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

我希望这能对你有所帮助

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

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

票数 13

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29320363

复制

相似问题

问无法读取未定义的属性“”__reactAutoBindMap“”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法读取未定义的属性“”__reactAutoBindMap“”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法读取未定义的属性“”__reactAutoBindMap“”
EN