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 {
  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;