ReactJS導航菜單

Question

我是新來的JS。以下是我們MainMenu導航的代碼。只有當用戶已經登錄時（我們在另一個JS文件中使用Google Signin 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 { 
    construstor(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;