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)

總結：這樣寫功能雖然是實現了，但感覺還是比較繁瑣和怪異的，想請教一下大佬們有沒有更加簡單快速的實現方法，歡迎吐槽~！