Javascript React 组件根据条件返回 2 个值

Question

我有一个 react 组件并且有一个条件。

我想根据条件结果有不同的返回jsx。

这是我所拥有的，但它只返回最后一个。

代码如下:

import React, { Component } from 'react';
import { Redirect } from 'react-router';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: sessionStorage.getItem('isLoggedIn'),
      redirect: false,
    };
  }

  render() {

    if (!this.state.isLoggedIn) {

      return (
        <div>
          <h1>You are NOT logged in</h1>
        </div>
      );

    } else {

      return (
        <div>
          <h1>You ARE logged in</h1>);
        </div>

    }
  }
}

export default Login;

我该如何解决这个问题？

Answer 1

假设isLoggedIn对应的sessionStorage中保存的是false

您应该使用:

this.state = {
  isLoggedIn: sessionStorage.getItem('isLoggedIn') === 'true',
  redirect: false,
}

存储在 sessionStorage 中的值是字符串。因此，false 将存储为 'false'。因此，this.state.isLoggedIn 始终为 true。