javascript - 传递 prop 服务器端不会在客户端呈现

Question

以下 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。

Answer 1

让我们调用 {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)
}

1. exists bool 值现在可以在 App 组件状态中通过 this.state.exists 访问