react实现底部固定菜单栏

在项目中经常会碰到这种需求，底部固定的菜单栏目，本来是想直接用react-router-dom组件的navLink来实现的，因为navLink组件有个属性 activeClassName设置选中样式，默认值为active,通过这个直接给选中的当前页面添加一个选中的样式即可，但是因为我想在里面加入一个图标，这就涉及到图标也要切换了，捣鼓了一下也不知道怎么用navLink来实现，最后就只能自己来写了。

先上效果图：

说说我的思路：

1.在constructor钩子里面的state中定义好一个变量来配置菜单栏中的信息：页面url,文字，是否选中，默认图标，选中图标

2.在componentDidMount钩子里面拿到当前页面的url，然后去配置信息的变量里面去循环匹配，如果和当前页url相等则把isActive设置为true,其他的设置为false

3.在render函数中判断每项的isActive属性值，如果为true则给它添加一个选中的样式名，图标用选中的图标，如果为false则样式名为空，图标用默认图标。

4.最后就是点击跳转页面的函数了：在每项中自定义一个属性data-to来表示要跳转的页面，取值就用state配置好的url，点击的时候拿到这个值，然后用路由跳转到此页面。

以下为组件代码：样式就的代码和图标就不上传了

import React from 'react'
import { withRouter } from 'react-router-dom'
import '../../styles/index.less'
import './index.less'
import * as Icon from '../../utils/icon';

class TabFooter extends React.Component {
    constructor(props) {
        super(props);
        this.pageGo=this.pageGo.bind(this);
        this.state={
            pageInfo:[
                {pageUrl:"home",text:"首页",isActive:false,icon:Icon.HOME_ICON,icon_select:Icon.HOME_ICON_ACTIVE},
                {pageUrl:"list",text:"分类",isActive:false,icon:Icon.SORT_ICON,icon_select:Icon.SORT_ICON_ACTIVE},
                {pageUrl:"cart",text:"购物车",isActive:false,icon:Icon.CART_ICON,icon_select:Icon.CART_ICON_ACTIVE},
                {pageUrl:"person",text:"我的",isActive:false,icon:Icon.PERSON_ICON,icon_select:Icon.PERSON_ICON_ACTIVE}
            ]
        }
    }

    componentDidMount() {
        //拿到当前页面的pageUrl，循环state中的pageInfo，把当前页的isActive设置为true
        let currentPage =window.location.pathname.replace("/","");
        let data=this.state.pageInfo;
        data.forEach((item,index)=>{
              item.isActive=false;
              if(item.pageUrl===currentPage){
                  data[index].isActive=true;
                  this.setState({
                      pageInfo: data
                    });
              }
        })
    }

    render() {
        let data=this.state.pageInfo;
        let ClassName="";
        let imgPath="";
        return (
            <ul className="tab_footer_box">
                {
                    data.map((item,index)=>{
                        if(item.isActive){
                            ClassName="selected";
                            imgPath=item.icon_select
                        }else{
                            ClassName="";
                            imgPath=item.icon
                        }
                        return(
                            <li className={ClassName} key={index} data-to={item.pageUrl} onClick={this.pageGo}>
                                <img src={imgPath} alt=""/>
                                <p>{item.text}</p>
                            </li>
                        )
                    })
                }
            </ul>
        )
    }

    //定义点击跳转页面函数
    pageGo (event){
        let page=event.currentTarget.getAttribute("data-to");
        this.props.history.push("/"+page);
    }
}

export default withRouter(TabFooter)

总结：这样写功能虽然是实现了，但感觉还是比较繁琐和怪异的，想请教一下大佬们有没有更加简单快速的实现方法，欢迎吐槽~！

react实现底部固定菜单栏

猜你喜欢