ReactJS 导航菜单

Question

我是反应JS的新手。下面是我们的主菜单导航的代码。我想仅在用户已经登录时才显示"注销"（我们在另一个 JS 文件中使用 Google 登录 API）。我如何实现这一点？

import React from 'react';
import { Link } from 'react-router';
import { IndexLink } from 'react-router';
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap';
import { Button } from 'react-bootstrap';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import UserStore from '../store/UserStore';
import cookie from 'react-cookie';
import { browserHistory } from 'react-router';
class MainMenu extends React.Component {

logout() {
    UserStore.logout();
    cookie.remove('userId', { path: '/' });
    cookie.remove('pic', { path: '/' });
    cookie.remove('email', { path: '/' });
    cookie.remove('profile', { path: '/' });
    browserHistory.push('/login');
}
viewDB() {
    browserHistory.push('/testDashboard');
}
render() {
    console.log("****************************************************");
    return (
    <Navbar collapseOnSelect>
<Navbar.Header>
  <Navbar.Brand>
    <a href="#">
                <img src={require('../images/logo.jpg')}/>
    </a>
  </Navbar.Brand>
  <Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
  <Nav pullRight>
    <NavItem eventKey={1} href="http://www.test.com/howitworks">How it works</NavItem>
    <NavItem eventKey={2} href="#">Why Test</NavItem>
    <NavItem eventKey={2} href="#">Blog</NavItem>
    <NavItem eventKey={2} href="#" onClick={this.viewDB}>My Energy Dashboard</NavItem>
    <NavItem eventKey={2} href="#">{"Hi " + localStorage.name}</NavItem>
    <NavItem eventKey={2} href="#" className="last" onClick={this.logout}>Logout</NavItem>
  </Nav>
    </Navbar.Collapse>
  </Navbar>
        );
    }
}
export default MainMenu;

Answer 1

在上面的代码中，您将看到如何呈现（或不呈现）注销，但您仍然需要编写确定用户是否已登录所需的代码。

import React from 'react';
import { Link } from 'react-router';
import { IndexLink } from 'react-router';
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap';
import { Button } from 'react-bootstrap';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import UserStore from '../store/UserStore';
import cookie from 'react-cookie';
import { browserHistory } from 'react-router';
class MainMenu extends React.Component {
  constructor(props){
    super(props);
    this.renderLogout = this.renderLogout.bind(this);
    this.state = {
      mustShowLogout: false;
    }
  }
logout() {
    UserStore.logout();
    cookie.remove('userId', { path: '/' });
    cookie.remove('pic', { path: '/' });
    cookie.remove('email', { path: '/' });
    cookie.remove('profile', { path: '/' });
    browserHistory.push('/login');
}
viewDB() {
    browserHistory.push('/testDashboard');
}
renderLogout(){
    if(this.state.mustShowLogout)
        return (<NavItem eventKey={2} href="#" className="last" onClick={this.logout}>Logout</NavItem>);
    return null;
}
render() {
    console.log("****************************************************");
    return (
    <Navbar collapseOnSelect>
<Navbar.Header>
  <Navbar.Brand>
    <a href="#">
                <img src={require('../images/logo.jpg')}/>
    </a>
  </Navbar.Brand>
  <Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
  <Nav pullRight>
    <NavItem eventKey={1} href="http://www.test.com/howitworks">How it works</NavItem>
    <NavItem eventKey={2} href="#">Why Test</NavItem>
    <NavItem eventKey={2} href="#">Blog</NavItem>
    <NavItem eventKey={2} href="#" onClick={this.viewDB}>My Energy Dashboard</NavItem>
    <NavItem eventKey={2} href="#">{"Hi " + localStorage.name}</NavItem>
    {this.renderLogout()}
  </Nav>
    </Navbar.Collapse>
  </Navbar>
        );
    }
}
export default MainMenu;