React 使用 Ant 导航刷新保持展开，点击导航自动关闭展示

在React中使用Ant Design时，可以通过Collapse组件来实现导航的折叠与展开。你可以使用Collapse组件的defaultActiveKey属性来设置默认展开的菜单项，同时使用onSelect属性来处理菜单项的点击事件，从而控制菜单的展开和关闭。

以下是一个简单的例子，展示了如何使用Ant Design的Collapse组件来实现导航的刷新保持展开以及点击自动关闭的展示：

import React from 'react';
import { Collapse } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
 
const { Panel } = Collapse;
 
const NavCollapse = () => {
  const [activeKey, setActiveKey] = React.useState(['1']); // 默认展开第一个菜单项
 
  const onSelect = (key) => {
    setActiveKey(key.length ? [key[key.length - 1]] : []); // 当点击菜单项时，关闭其他展开的菜单项
  };
 
  return (
    <Collapse
      bordered={false}
      defaultActiveKey={['1']} // 默认展开的菜单项
      activeKey={activeKey}
      onSelect={onSelect}
    >
      <Panel header="导航一" key="1" icon={<AppstoreOutlined />}>
        内容1
      </Panel>
      <Panel header="导航二" key="2" icon={<MailOutlined />}>
        内容2
      </Panel>
      <Panel header="导航三" key="3" icon={<SettingOutlined />}>
        内容3
      </Panel>
    </Collapse>
  );
};
 
export default NavCollapse;

在这个例子中，NavCollapse组件使用了Collapse来创建一个可折叠的导航栏。defaultActiveKey设置了默认展开的菜单项，activeKey是一个状态，用于控制当前展开的菜单项，onSelect事件处理器用于更新activeKey状态，实现点击导航时自动关闭的功能。