webio-node/src/components/AdminPage/Wristband/index.js

import React from 'react';
import {Grid, Container, Segment, Menu, List} from 'semantic-ui-react';
import LocStatus from '../../../containers/AdminPage/Wristband/LocStatus';

class WristbandPage extends React.Component{
    state = {
        page: ''
    }

    changePage = (page) => {
        this.setState({
            page
        })
    }

    getRenderPage = () => {
        switch(this.state.page) {
            case 'locstatus':
                return <LocStatus />;
            default:
                return null;
        }
    }

    render(){

        return (
            <Container fluid>
                <Grid>
                    <Grid.Column width={4}>
                        <Menu vertical={true}>
                            <Menu.Item>
                                <Menu.Header>主選單</Menu.Header>
                                <Menu.Menu>
                                    <Menu.Item active={this.state.page == 'locstatus'} onClick={()=>{ this.changePage('locstatus'); }}>
                                        位置資訊
                                    </Menu.Item>
                                </Menu.Menu>
                            </Menu.Item>
                        </Menu>
                    </Grid.Column>
                    <Grid.Column width={12}>
                        {this.getRenderPage()}
                    </Grid.Column>
                </Grid>
            </Container>
        )
    }
}

export default WristbandPage;