javascript - React 无法动态渲染正确的组件

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>

        )

    }
}

这会将登录状态传递给包装器组件。该包装器动态确定要渲染哪个组件。这是包装器代码，

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

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

Answer 1

您正在传递 state={this.state.loggedIn} ，这将是 true 或 false 但在你的 child 中，你会得到 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>
        );
    }
}