Question

以下node.js代码使用prop ...

呈现我的App组件

var reactHtml = reactDom.renderToString(App({exists: true}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});

这个组件被我的jade文件抓住了......

#app != reactOutput

现在在组件本身，我正在检查道具是否已呈现......

render(){

        console.log(this.props.exists);
...
...

当我通过终端运行时，控制台打印出true。但是，在我的浏览器终端中，我得到undefined，这意味着在设置道具后，react会在客户端重新渲染组件。

我拼命想找到解决方案，我不想重组我的整个网站。有人可以帮我解决这个问题吗？

我是否需要以某种方式阻止重新渲染？

修改

所以在我的node.js文件中，我做了以下...

var reactHtml = reactDom.renderToString(App({}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml, errorExist:true});

在我的玉文件中，我做了以下内容......

#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和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})
});

玉文件

#app != reactOutput

#initialState =! initialState

<强> 2。在客户端上：从DOM中获取初始状态，并使用JSON.parse反应组件的getInitialState生命周期方法中的App对其进行反序列化

App反应组件

getInitialState() {
  return JSON.parse(document.getElementById('initialState').innerHTML)
}

现在可以通过exists

App

this.state.exists

传递prop服务器端没有被呈现为客户端

1 个答案: