ima*_*cus 9 javascript node.js express reactjs reactjs-flux
在过去的一周里,我完全不知道如何使用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'
请帮忙!!!:) 谢谢
Mat*_*yka 13
我有几乎相同的问题.我有:
React.render(AppTag(config), node);
AppTag是require()到JSX文件的地方.这会生成"无法读取未定义的属性'__reactAutoBindMap'"
我尝试了一些东西,但只有这解决了我的问题:
React.render(React.createElement(AppTag, config), node);
我希望这会有所帮助
我尝试了更多的东西,这也有效:
React.render(React.createFactory(AppTag)(config), node)