Question

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

如果设置为true（用户已登录），我需要将登录链接更改为：

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

所以我可以使用logout方法将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中，并根据用户登录状态更新该变量。

在render值的基础上，使用conditional rendering 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>}

如果条件为真，如果你想要一些混乱，那么你可以这样做：

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

如果将isLoggedIn存储在状态中会更好。

有关详情，请访问https://facebook.github.io/react/docs/conditional-rendering.html

Javascript React sessionstorage如果loggedIn更改导航链接

2 个答案: