以下 node.js 代码正在渲染我的 App
组件...
var reactHtml = reactDom.renderToString(App({exists: true}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
这个组件被我的 Jade 文件捕获了......
#app != reactOutput
现在在组件本身中,我正在检查是否呈现了 prop...
render(){
console.log(this.props.exists);
...
...
当我通过我的终端运行它时,控制台打印出 true
。但是,在我的浏览器终端中,我得到了 undefined
,这意味着在设置 prop 后,react 正在客户端重新渲染组件。
我拼命想找到解决这个问题的方法,我不想重组我的整个网站。有人可以帮我解决这个问题吗?
我是否需要以某种方式阻止重新渲染?
编辑
所以在我的 node.js 文件中我做了以下...
var reactHtml = reactDom.renderToString(App({}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml, errorExist:true});
在我的 jade 文件中我做了以下...
#app != reactOutput
script(type='text/javascript')
window.data =!{JSON.stringify(errorExist)};
但现在我试图在我的组件中检索数据...
if (window.data) {
return (
<Register />
);
}
else {
return (
<Index event={this.handleClick.bind(this)} />
);
}
但是我得到错误 window
and data
are not defined
。
最佳答案
让我们调用 {exists: true}
初始状态。
<强>1。在服务器上:使用JSON.stringify
序列化初始状态,并将其存储在jade 模板中。
node.js
var reactHtml = reactDom.renderToString(App({exists: true}));
res.render('../../tutorHub/views/index.jade', {
reactOutput: reactHtml,
initialState: JSON.stringify({exists: true})
});
Jade 文件
#app != reactOutput
#initialState =! initialState
<强>2。在客户端: 从 DOM 获取初始状态并使用 JSON.parse
在 getInitialState
中反序列化它App
React 组件的生命周期方法
应用 react 组件
getInitialState() {
return JSON.parse(document.getElementById('initialState').innerHTML)
}
exists
bool 值现在可以在App
组件状态中通过this.state.exists
访问
关于javascript - 传递 prop 服务器端不会在客户端呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39282812/