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) }
- the
exists
boolean accessible inapp
components state throughthis.state.exists
Comments
Post a Comment