react js隐藏并显示导航链接答案

【问题标题】：react js hide and show nav linksreact js隐藏并显示导航链接
【发布时间】：2018-03-15 05:27:23
【问题描述】：

我在前端使用 reactjs 和 bootstrap。当我登录时，导航的链接应该显示但不显示链接。

App.js

    class App extends Component {
  constructor(props)
  {
    super(props);
    this.state ={logged: true}
    this.TokenData = cookie.load("userToken");
    this.logOutFn = this.logOutFn.bind(this);
    this.updateLink = this.updateLink.bind(this);
  }
  updateLink(){
    console.log("cald");
    if(this.TokenData !== undefined)
    {
      console.log("inside");
      this.setState({logged: false})
    }
  }
  logOutFn(e){
    e.preventDefault();
    cookie.remove('userToken', { path: '/' })
    this.updateLink();
  }
  render() {
    return (
      <div className="App">
        <Router>          
            <div>
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
              <a className="navbar-brand" href="">Tutory</a>
              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
              </button>

              <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav mr-auto">
                  <li className="nav-item" hidden={this.state.logged}>
                  <Link className="nav-link" to={'/Profile'}>Profile</Link>
                  </li>
                  <li className="nav-item" hidden={this.state.logged}> 
                  <a onClick={this.logOutFn}><Link className="nav-link" to={'/'}>Logout</Link></a>
                  </li>
                  {/* <li className="nav-item">
                  <a className="nav-link" onClick={this.updateLink}>change</a>
                  </li> */}
                </ul>
              </div>
            </nav>

               <Switch>
                  {/* <Route exact path='/' component={Home} /> */}
                  <Route exact path='/' component={Login} />
                  <Route exact path='/Login' component={Login} />
                  <Route exact path='/Register' component={Register} />
                  <Route exact path='/Admin' component={Admin} />
                  <Route exact path='/AccountEdit/:aid' component={AccountEdit} />
                  <Route exact path='/Profile' component={Profile} />
                  <Route exact path='/Welcome' render={(props)=><Welcome updateLink={this.updateLink} {...props}/>}/>
               </Switch>
            </div>
         </Router>
      </div>
    );
  }
}

一旦我登录，我就会调用函数 updateLink() 但它不会显示任何链接，直到我在登录前刷新页面 before login 登录后 after login 刷新后 after refresh

【问题讨论】：

标签： reactjs hyperlink show-hide react-router-dom

【解决方案1】：

我更改了此代码

updateLink(){
    console.log("cald");
    if(this.TokenData !== undefined)
    {
      console.log("inside");
      this.setState({logged: false})
    }
  }

进入这个

updateLink(){
    console.log("cald");
    if(cookie.load("userToken") !== undefined)
    {
      console.log("inside");
      this.setState({logged: false})
    }
  }

而且效果很好.....

【讨论】：

【解决方案2】：

其实如果你把userToken设置在state里面就可以了。

  constructor(props)
  {
    super(props);
    this.state ={
       logged: true,
       TokenData: cookie.load("userToken")
    }
    this.logOutFn = this.logOutFn.bind(this);
    this.updateLink = this.updateLink.bind(this);
  }

然后在updateLink中你可以这样做：

updateLink(){
    console.log("cald");
    if(this.state.TokenData !== undefined)
    {
      console.log("inside");
      this.setState({logged: false})
    }
  }

【讨论】：