условный оператор не отображается правильно

Question

Я рендеринга с помощью следующих реагировать ...

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; 

Так я использую Node.js для отображения страницы. Когда я сделать, как так ...

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

<Index /> визуализируется, как ожидалось, и console.log(this.props.exists) распечатывает false, также как и ожидалось.

Однако проблема возникает, когда я отобразить страницу, как так ...

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

console.log(this.props.exists) печатает true, который является правильным. Тем не менее, страница <Index /> обрабатывается в противоположность странице <Register />.

Я подозреваю, что это что-то делать с

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

почему this.state.register читается правильно, но this.props.exists никогда не достигается.

Может кто-нибудь показать мне, почему это так?

Answer 1

Я думаю, вы должны использовать reactDom.renderToString(<App exists={true} />) не reactDom.renderToString(App({exists: true}));