Javascript React組件有2個回報取決於條件

我有一個反應組件，並有一個條件。Javascript React組件有2個回報取決於條件

我想根據條件結果有不同的返回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;

我怎樣才能解決這個問題？

來源

2017-06-29 unzip700

看起來更可能是你的'sessionStorage'不工作。 –

爲什麼'state'對象中沒有'isLoggedIn'？ – glhrmv

@dogui我已經添加sessionStorage到狀態，但它仍然總是顯示相同的回報 – unzip700

你在錯誤的地方有一個右括號。它應該在div之後而不是h1之後。順便說一句，沒有必要進行第二次回報。

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

來源

2017-06-29 15:15:21

我需要2個不同的div結構 – unzip700

無論哪種方式，您都會返回一個。你的版本在功能上有什麼不同？你只是有更多的代碼來完成相同的事情，對吧？ –

假設，錯誤被保存在sessionStorage的對應isLoggedIn

你應該使用：存儲在sessionStorage的

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

值的字符串。所以，假將被存儲爲'假'。所以，this.state.isLoggedIn總是如此。

來源

2017-06-29 15:27:16

Javascript React組件有2個回報取決於條件

回答

相關問題