Question

这是我的App.js

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: true}
    }

    render() {
        return (
            <div>
                <Helmet>
                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
                </Helmet>
                <Wrapper state={this.state.loggedIn}/>
            </div>

        )

    }
}

这会将loggedIn状态向下传递给包装器组件。此包装器动态确定要呈现的组件。这是包装器代码，

class Wrapper extends React.Component {

    render() {
        const MainComp = this.props.state.loggedIn ? Logged : Unlogged;
        return (
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={this.props.state}/>
                    <MainComp state={this.props.state}/>
                </div>
            </BrowserRouter>
        );
    }
}

即使在loggedIn变量为false时，问题仍然是呈现正确的组件。但是，当我将其更改为true时，它仍然会继续呈现旧的或不正确的组件。我在这里做错了什么？

Answer 1

你传递state={this.state.loggedIn}这是真是假但在您的孩子中，您得到的this.props.state.loggedIn根本没有定义，因为state === loggedIn

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: true}
    }

    render() {
        return (
            <div>
                <Helmet>
                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
                </Helmet>
                <Wrapper state={this.state}/>
            </div>

        )

    }
}

使用子类中的props调用构造函数。

class Wrapper extends React.Component 
{
  constructor(props)
  {
    super(props);
  }

    render() {
        const MainComp = this.props.state.loggedIn ? Logged : Unlogged;
        return (
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={this.props.state}/>
                    <MainComp state={this.props.state}/>
                </div>
            </BrowserRouter>
        );
    }
}

React无法动态呈现正确的组件

1 个答案: