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
existsboolean accessible inappcomponents state throughthis.state.exists
Comments
Post a Comment