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

条件语句无法正确呈现

1 个答案: