在我app.js
我有两个部分......
app.use('/', index);
app.use('/register', reg);
索引部分和寄存器部分。
在我的index.js
我正在呈现以下内容......
var React = require('react');
var reactDom = require('react-dom/server');
var RegApp = React.createFactory(require('../components/index'));
router.get('/', function(req,res) {
var reactHtml = reactDom.renderToString(RegApp({exists: false}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});
这是要调用以下反应组件...
class RegApp extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<Register />
);
}
}
module.exports = RegApp;
因此,用户将看到的第一页是<Register />
组件。现在,在我的另一条路线中,register.js
我正在查询数据库并根据结果呈现页面。
简而言之,我试图渲染另一个组件来替换我在上面渲染的组件......
var React = require('react');
var reactDom = require('react-dom/server');
var App = React.createFactory(require('../components/index'));
router.post('/', function (req, res) {
//Here I query the db
...
console.log("query success");
var reactHtml = reactDom.renderToString(App({exists: true}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
尝试渲染的组件如下......
class App extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<Index />
);
}
}
module.exports = App;
问题是,这个组件永远不会被渲染。页面刷新并呈现第一个组件<Register />
而不是<Index />
。这一切都非常令人困惑,因为控制台打印query success
,但页面仍未呈现。即使我在console.log
组件的render方法中放置App
,它也会被打印出来,但页面不会被渲染。我该如何解决这个问题?
答案 0 :(得分:1)
您似乎在路径的Register组件中传递:/
router.get('/', function(req,res) {
var reactHtml = reactDom.renderToString(RegApp({exists: false}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});
路径应该是/在上面注册,或者组件应该是App组件。