【面向对象】关于利用数组对象的创建底部栏

/*eslint-disable*///底部导航栏组件import React from "react";import {render} from "react-dom";import "./compoments.less";import indexNo from ‘../images/index-no.png‘import indexYes from ‘../images/index-yes.png‘import shopNo from ‘../images/shop-no.png‘import shopYes from ‘../images/shop-yes.png‘import serviceNo from ‘../images/server-no.png‘import serviceYes from ‘../images/server-yes.png‘import myNo from ‘../images/my-no.png‘import myYes from ‘../images/my-yes.png‘

export default class BottomBar extends React.Component {    constructor(props) {        super(props);    }

state = {        bottomBar: [{            name: "index",            isActive: false,            icon: indexNo,            activeIcon: indexYes,            font: "首页",            url: "#/index"        }, {            name: "shop",            isActive: false,            icon: shopNo,            activeIcon: shopYes,            font: "门店",            url: "#/index"        }, {            name: "service",            isActive: false,            icon: serviceNo,            activeIcon: serviceYes,            font: "门店",            url: "#/service"        }, {            name: "my",            isActive: false,            icon: myNo,            activeIcon: myYes,            font: "我的",            url: "#/my"        }]    };

/**     * 页面开始获取哪个菜单属于被点击状态     */    componentWillMount() {        let _select = localStorage.getItem(‘select‘);        let {bottomBar} = this.state;        bottomBar.filter(item => {            if (item.name == _select) {                item.isActive = true            }        });        this.setState(            bottomBar        );    }

setItem(_item) {        localStorage.setItem(‘select‘, _item.name);        location.replace(_item.url);    }

render() {        const BottomBar = ()=> {            let {bottomBar} = this.state;            return (                <div className="tabBar">                    { bottomBar.map((i) =>                        <div id={i.name} className="bottom-common-line-div index" key={i.name}                             onClick={v => this.setItem(i,v)}>                            <div className="icon-img">                                <img src={i.isActive == true ? i.activeIcon : i.icon } />                            </div>                            <p>{i.font}</p>                        </div>                    )}

</div>            )        };        return (<BottomBar/>)

};

}

这样子后期修改/增加底部栏的个数 只需要在数组上做修改即可，包括后台对权限的管理，灵活性更大

原文地址：https://www.cnblogs.com/xyyyy/p/10273587.html