React 中使用antd，刷新时被选中的menu二级菜单初始化的展开问题

这篇文章距离上次修改已过256天，其中的内容可能已经有所变动。

在React中使用Ant Design时，如果你遇到刷新页面时，被选中的二级菜单（SubMenu）不会初始化为展开状态的问题，可以通过以下步骤解决：

使用localStorage或者sessionStorage来保存菜单状态。
在组件的componentDidMount生命周期方法中，读取保存的状态并更新菜单的展开状态。
使用SubMenu组件的openKeys属性来控制展开状态。

以下是一个简化的例子：

import React, { Component } from 'react';
import { Menu } from 'antd';
import { SaveOutlined, UserOutlined, LaptopOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

class SiderMenu extends Component {
  state = {
    openKeys: []
  };

  componentDidMount() {
    const openKeys = localStorage.getItem('openKeys');
    if (openKeys) {
      this.setState({ openKeys: openKeys.split(',') });
    }
  }

  onOpenChange = openKeys => {
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (latestOpenKey) {
      localStorage.setItem('openKeys', openKeys.join(','));
    }

    this.setState({ openKeys });
  };

  render() {
    return (
      <Menu
        mode="inline"
        openKeys={this.state.openKeys}
        onOpenChange={this.onOpenChange}
        style={{ width: 256 }}
      >
        <SubMenu key="sub1" icon={<UserOutlined />} title="Submenu 1">
          <Menu.Item key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<LaptopOutlined />} title="Submenu 2">
          <Menu.Item key="3">Option 3</Menu.Item>
          <Menu.Item key="4">Option 4</Menu.Item>
        </SubMenu>
        <Menu.Item key="5" icon={<SaveOutlined />}>
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
            Item 5
          </a>
        </Menu.Item>
      </Menu>
    );
  }
}

export default SiderMenu;

在这个例子中，当SubMenu展开时，它的key会被保存到localStorage中。当组件挂载后，会从localStorage中读取保存的openKeys并更新到状态中，从而使相应的SubMenu展开。这样，当页面刷新时，展开状态会被记住。

React 中使用antd，刷新时被选中的menu二级菜单初始化的展开问题

评论已关闭

推荐阅读