material-ui的BottomNavigation的使用

最新推荐文章于 2025-11-14 16:08:28 发布

原创最新推荐文章于 2025-11-14 16:08:28 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

react笔记同时被 2 个专栏收录

11 篇文章

订阅专栏

material-ui

1 篇文章

订阅专栏

本文介绍了一种在React应用中封装底部导航组件的方法，通过父子通信实现页面切换，利用material-ui库美化界面，并展示了如何根据不同路径动态更新底部导航的状态。

准备：下载 npm i @material-ui/core @material-ui/icons

这里在单独将BottomNavation再次封装组件使用(使用了react父子通信的知识)：

因为底部导航通常是作为公共出现的布局，所以这里放在app.jsx中

import React, { Component } from 'react';
import {Link,Route,Switch,Redirect} from "react-router-dom";
import Home from './views/home/Home.jsx'
import Account from './views/account/Account.jsx'
import Goods from './views/goods/Goods.jsx'
import './App.scss';
import FooterNav from './components/smallComponents/footerNav.jsx'

class App extends Component {
  changeRoute=(routerName)=>{
      this.props.history.push(routerName);
  }

  render() {
    return (
        <div id="App">
            <div id='AppMain'>
                <Switch>
                    <Route path="/home" component={Home}/>
                    <Route path="/goods" component={Goods}/>
                    <Route path="/account" component={Account}/>
                    <Redirect to='/home' />
                </Switch>
            </div>
            <FooterNav appThis={this}></FooterNav>
        </div>
    );
  }
}

export default App;

接着，在FooterNav.jsx中



import React from 'react';
import PropTypes from 'prop-types';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import HomeIcon from '@material-ui/icons/Home';
import DashboardIcon from '@material-ui/icons/Dashboard';
import FaceIcon from '@material-ui/icons/Face';
import './style.scss'


class FooterNav extends React.Component {
    state = {
        value: 0,
    };
    static propTypes = {
        appThis: PropTypes.object.isRequired,
    }
    componentWillMount(){
        //处理页面刷新时value重置的问题
        var current=this.props.appThis.props.location.pathname;
        if(current=='/home'){
            this.setState({ value:0 });
        }else if(current=='/goods'){
            this.setState({ value:1 });
        }else if(current=='/account'){
            this.setState({ value:2 });
        }
    }
    handleChange = (event, value) => {
        this.setState({ value });
        var routerName='';
        if(value==0){
            routerName='/home'
        }else if(value==1){
            routerName='/goods'
        }else if(value==2){
            routerName='/account'
        }
        this.props.appThis.props.history.push(routerName);
    };

    render() {
        const { value } = this.state;
        const { classes } = this.props;
        return (
            <div id="FooterNav">
                <BottomNavigation
                    value={value}
                    onChange={this.handleChange}
                    showLabels
                >
                    <BottomNavigationAction label="首页" icon={<HomeIcon />} />
                    <BottomNavigationAction label="分类" icon={<DashboardIcon />} />
                    <BottomNavigationAction label="个人" icon={<FaceIcon />} />
                </BottomNavigation>
            </div>
        );
    }
}



export default FooterNav;