条件语句未正确呈现

Question

我正在使用 react 渲染以下内容...

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}));