Javascript React sessionstorage如果登錄更改導航鏈接

Question

我有一個sessionstorage變量被稱爲loggedIn。

如果設置爲true（用戶登錄）我需要登錄鏈接更改爲：

<li><a href="" onClick('logout()')>Logout</li> 

這樣我就可以使用註銷方法將sessionStorage的variale更改爲false。

下面是當前的代碼：

class Nav extends React.Component { 
constructor(props) { 
    super(props); 
    this.isLoggedIn = sessionStorage.getItem('isLoggedIn') === 'true'; 
    this.state = { 
     message: 'You are Logged In', 
    }; 

} 

logout() { 
    sessionStorage.setItem('loggedIn', false); 
    // then update changes 
} 

    render() { 
    return (
     <ul> 
     <li><a href="#home">Home</li> 
     <li><a href="#login">Login</li> // If Not logged in change this to <li><a href="" onClick('logout()')>Logout</li> 
     <li></li> // If loggedin the show Message here 
     </ul> 
    ) 
    } 

我怎樣才能做到這一點？

Answer 1

通過state變量保持用戶登錄狀態，將isLoggedIn變量存儲在state中，並根據用戶登錄狀態更新該變量。

使用conditional rendering到render不同元素的基礎上isLoggedIn的值。

另一個變化是你定義在註銷單擊事件的方式，它應該是：

onClick={this.logout} 

，並綁定在constructor此方法。

檢查文檔：How to handle events in JSX

寫這樣的：

class Nav extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     message: 'You are Logged In', 
     isLoggedIn: sessionStorage.getItem('isLoggedIn') === 'true' 
     }; 
     this.logout = this.logout.bind(this); 
    } 

    logout() { 
    sessionStorage.setItem('loggedIn', false); 

    //here update the state variable 

    this.setState({ 
     isLoggedIn: false 
    }); 
    } 

    render() { 
    return (
     <ul> 
     <li><a href="#home">Home</li> 

     {/*use condition here if user is loggedin then render the logout otherwise login button*/}   

     {this.state.isLoggedIn ? 
      <li><a href="" onClick={this.logout}>Logout</li> 
      : 
      <li><a href="#login">Login</li> 
     } 

     <li></li> 
     </ul> 
    ) 
    } 
} 

Answer 2

您可以使用三元運算符的JSX是這樣的：

{this.isLoggedIn ? <li><a href="" onClick={this.logout}>Logout</a></li> : <li><a href="#login">Login</a></li>} 

，如果你想要一些的messge如果條件是真的，那麼你可以這樣做：

{this.isLoggedIn && <li>Your message</li>} 

如果將狀態存儲爲isLoggedIn會更好。

欲瞭解更多詳情，請點擊這裏https://facebook.github.io/react/docs/conditional-rendering.html