bedingte Anweisung nicht richtig

Question

Rendering Ich bin Rendering folgende reagieren mit ...

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      register: false 
     } 
    } 
handleClick(event) 
{ 
     this.setState({register: true}); 
} 

    render(){ 

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

     if (this.state.register || this.props.exists == true) { 
      return (
      <Register /> 
      ); 
     } 
     else { 
      return (
      <Index event={this.handleClick.bind(this)} /> 
      ); 
     } 
    } 
} 

module.exports = App; 

Also ich node.js bin mit der Seite zu machen. Wenn ich als so machen ...

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

<Index /> wird wiedergegeben, wie erwartet und console.log(this.props.exists) druckt false, auch wie erwartet.

tritt jedoch das Problem, wenn ich die Seite als so machen ...

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

console.log(this.props.exists) druckt true, was richtig ist. Die <Index /> Seite wird jedoch im Gegensatz zur <Register /> Seite gerendert.

Ich vermute, es hat etwas mit

(this.state.register || this.props.exists == true) 

Aus irgendeinem Grund zu tun this.state.register richtig gelesen wird, aber this.props.exists nie erreicht wird.

Kann mir jemand zeigen, warum das so ist?

Answer 1

ich glaube, Sie reactDom.renderToString(<App exists={true} />) nicht reactDom.renderToString(App({exists: true}));