React 中使用antd,刷新时被选中的menu初始化的问题

在react项目中使用antd进行集成的时候,用到了menu做导航栏菜单项。

根据用户的操作习惯,选中一个菜单节点的时候,刷新页面的时候应该保持用户之前的选中状态。

今天恰巧碰到了这个问题,于是尝试了解决方案。

查看了一下antd中menu的API,定义如下

openKeys当前展开的 SubMenu 菜单项 key 数组string[] 
selectedKeys当前选中的菜单项 key 数组string[] 

 

用到的就是这两个属性值,我们可以在menu中引用他,然后在state中进行配置

constructor(props) {
        super(props);
        this.state = {
            openKeys: [],
            selectedKeys: []
        };
    }

然后在render函数中的menu中绑定

render() {

        return (
            <div style={{ width: '100%' }}>
                <Menu
                    theme="dark" mode="inline" onClick={this.menuClick}  selectedKeys={this.state.selectedKeys}  openKeys={this.state.openKeys}
                >
                    {
                        this.props.menus.map((item) => {
                            return item.subs ? this.getParentMenu(item) : this.getChildrenMenu(item)
                        })
                    }
                </Menu>
            </div>
        );
    }

我们知道页面刷新之后会在render执行之后去调用componentDidMount函数,那我们可以在我们的menu菜单都被渲染之后在componentDidMount中写我们的菜单选中逻辑。

componentDidMount() {
        // 获取当前路径
        const pathname = this.props.location.pathname
        //获取当前所在的目录层级
        const rank = pathname.split('/')
        //rank = ["","policy-engine","nas-client"]
        switch (rank.length) {
            case 2:  //一级目录
                this.setState({
                    selectedKeys: [pathname]
                })
                break;
            case 3: //二级目录,要展开一个subMenu
                this.setState({
                    selectedKeys: [pathname],
                    openKeys: [rank.slice(0, 2).join('/')]
                })
                break;
            case 4: //三级目录,要展开两个subMenu
                this.setState({
                    selectedKeys: [pathname],
                    openKeys: [rank.slice(0, 2).join('/'), rank.slice(0, 3).join('/')]
                })
                break; 
        
        }
    }

其中selectedKeys存储当前选中的路径,是个数组

而openKeys存储的是当前要打开的路径,如果当前选中三级菜单节点,那么这个打开的路径就应该是['一级菜单节点路径','二级菜单节点路径']。依次类推。

这里需要注意的是使用split("/")函数时,我的路径是以"/"开头的,所以即便是二级菜单,那么它对应的长度应该是3,而不是二,当然你也可以将null或者"'删除之后,保留和菜单对应的层级数。这里就不再处理了。

Ant Design Charts 是 Ant Design 团队开发的一款基于 React 封装的图表库。它使用了 Ant Design 的设计语言和风格,提供了多种常见图表类型的组件,方便开发者在 React 项目快速实现数据可视化。 在 React 项目使用 Ant Design Charts,首先需要通过 npm 或 yarn 安装该库,并引入所需的图表组件。安装完成后,我们可以在项目使用 import 语句将所需的图表组件导入: ```javascript import { LineChart, BarChart, PieChart } from 'ant-design-charts'; ``` 接下来,可以创建一个简单的 React 组件,将图表组件作为子组件进行渲染。使用 Ant Design Charts 提供的配置项,可以通过传入数据、设置样式、设置交互行为等方式自定义图表的呈现效果。 ```javascript import React from 'react'; import { LineChart } from 'ant-design-charts'; const MyChart = () => { const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 }, ]; const config = { data: data, xField: 'year', yField: 'value', height: 400, xAxis: { type: 'cat', }, yAxis: { type: 'linear', min: 0, }, seriesField: '', smooth: true, }; return <LineChart {...config} />; }; export default MyChart; ``` 通过以上代码,我们创建了一个简单的折线图组件,并传入一份模拟数据和一些自定义的配置项。最后,我们将该组件进行导出,就可以在其他需要使用该图表的地方进行调用和渲染。 以上就是在 React 使用 Ant Design Charts 的简单介绍和示例。通过这个图表库,我们可以方便地在 React 项目使用 Ant Design 风格的图表组件,快速实现数据的可视化。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值