JavaScript Reagieren Sie auf Sessionstorage, wenn Sie angemeldet sind, Nav-Links ändern

Question

Ich habe eine Session-Storage-Variable, die als eingeloggt heißt.

Wenn es auf true gesetzt ist (Benutzer angemeldet ist) Ich brauche, um den Login-Link zu ändern:

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

so kann ich die Logout-Methode verwenden, um die session variale auf false zu ändern. Hier

ist der aktuelle Code:

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

Wie kann ich das tun?

Answer 1

Pflegen Sie den Benutzeranmeldestatus über die Variable state, speichern Sie die isLoggedIn Variable in state und aktualisieren Sie diese Variable auf der Grundlage des Benutzeranmeldestatus.

Verwenden Sie conditional rendering bis render verschiedene Elemente auf der Grundlage von isLoggedIn Wert.

Eine weitere Änderung ist die Art und Weise Sie das Click-Ereignis beim Abmelden definiert, sollte es sein:

onClick={this.logout} 

und binden diese Methode in der constructor.

prüfen doc: How to handle events in JSX

schreibt es so:

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

Sie ternären Operator in jsx wie diese verwenden:

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

und wenn Sie zu einem gewissen messge wollen, wenn eine Bedingung ist wahr, dann können Sie es so machen:

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

Es wäre besser, wenn Sie isLoggedIn im Zustand speichern.

Für weitere Details, gehen Sie einfach hier https://facebook.github.io/react/docs/conditional-rendering.html