具有條件的Java React Component有2個返回

Question

我有一個反應組件，並有一個條件。

我想根據條件結果使用不同的return 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。

Answer 2

您在錯誤的位置放了一個右括號。 應該在div之后，而不是h1 。 順便說一句，沒有必要第二次回報。

render() { return ( <div> <h1>You are { (!this.state.isLoggedIn) ? 'NOT' : '' } logged in</h1> </div> ); }