Question

在过去的一周里，我对如何使用React设置服务器端渲染感到十分茫然。这是一个新项目，但它是一个快速服务器，我试图渲染一个超级简单的hello world react app，它使用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'未定义”

请帮助!!! :)谢谢

Answer 1

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

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

AppTag需要（）到JSX文件。这就产生了我无法读取属性＆＃39; __ reactAutoBindMap＆＃39;未定义＆＃34;

我尝试了一些事情，但只有这解决了我的问题：

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

我希望这会有所帮助

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

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

Answer 2

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

Warning: Something is calling a React component directly. Use a factory or JSX instead. See: 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' });
}

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

2 个答案: