Javascript React sessionstorage 如果登录更改导航链接

Question

我有一个名为loggedIn的sessionstorage变量。

如果它设置为 true (用户已登录)，我需要将登录链接更改为:

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

这样我就可以使用注销方法将 sessionStorage 变量更改为 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根据 isLoggedIn 值渲染不同的元素。

另一个变化是定义注销时点击事件的方式，它应该是:

onClick={this.logout}

并在构造函数中绑定(bind)此方法。

检查文档: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>
    )
  }
}