javascript - passing prop server-side is not being rendered client-side -


the following node.js code rendering app component prop...

var reacthtml = reactdom.rendertostring(app({exists: true})); res.render('../../tutorhub/views/index.jade', {reactoutput: reacthtml}); 

and component caught jade file so...

#app != reactoutput 

now in component itself, i'm checking see if prop rendered...

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

when run through terminal, console prints out true. however, in browser terminal undefined, meaning react re-rendering component on client side after prop set.

i desperately trying find fix this, not want have restructure entire website. can me fix this?

do need prevent re-rendering somehow?

edit

so in node.js file did following...

var reacthtml = reactdom.rendertostring(app({})); res.render('../../tutorhub/views/index.jade', {reactoutput: reacthtml, errorexist:true}); 

in jade file did following...

#app != reactoutput  script(type='text/javascript')                                                        window.data =!{json.stringify(errorexist)}; 

but tried retrieve data in component...

if (window.data) {         return (             <register />              );         }         else {             return (             <index event={this.handleclick.bind(this)} />              );         }   

but error window , data are not defined.

lets call {exists: true} initial state.

1. on server: serialize initial state using json.stringify , store in jade template.

node.js

var reacthtml = reactdom.rendertostring(app({exists: true})); res.render('../../tutorhub/views/index.jade', {   reactoutput: reacthtml,    initialstate: json.stringify({exists: true}) }); 

jade file

#app != reactoutput  #initialstate =! initialstate 

2. on client: initial state dom , deserialize using json.parse in getinitialstate lifecycle method of app react component

app react component

getinitialstate() {   return json.parse(document.getelementbyid('initialstate').innerhtml) } 
  1. the exists boolean accessible in app components state through this.state.exists

Comments