antd menu收缩时二级菜单不跟随的问题。

本文解决了AntdPro中因设置openkey导致的问题,通过判断菜单收起状态,调整openKeys值,使菜单在收起时变为不受控组件,从而避免了问题的发生。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是由于设置了openkey的原因。

由于业务需要设置openkey。

查看了Antd Pro的源码后发现,可以通过判断菜单在收起状态时,给Menu不设置openKeys值,这样就变为不受控组件,交给antd处理。

解决方案:

//判断菜单是否处于收缩状态设置openkey
const { openKeys } = this.state;
const defaultProps = this.props.collapsed ? {} : { openKeys };

 

转载于:https://www.cnblogs.com/unreal-feather/p/10313914.html

### 如何在 React 中用 Ant Design 实现带二级 Tab 菜单的顶部导航栏 为了实现在 React 应用中使用 Ant Design 组件库创建带有二级 Tab 菜单的顶部导航栏,可以遵循以下方法: #### 安装依赖包 首先,在项目根目录下安装 `antd` 及其对应的图标库。 ```bash npm install antd @ant-design/icons ``` #### 导入所需模块 接着,在项目的入口文件或组件文件里导入所需的 CSS 文件和 JS 模块。这一步骤确保了样式能够正常加载[^1]。 ```javascript import 'antd/dist/reset.css'; import { Tabs } from 'antd'; const { TabPane } = Tabs; ``` #### 创建顶层 Tabs 组件 定义一个包含多个子项的一级标签页容器,并为其设置默认激活状态。 ```jsx function TopLevelTabs() { const [activeKey, setActiveKey] = useState('tab1'); return ( <Tabs activeKey={activeKey} onChange={(key) => setActiveKey(key)}> {/* 添加更多的一级选项卡 */} <TabPane tab="一级菜单1" key="tab1"> Content of Tab Pane 1 </TabPane> <TabPane tab="一级菜单2" key="tab2"> Content of Tab Pane 2 </TabPane> </Tabs> ); } ``` #### 嵌套二级 Tabs 组件 针对特定的一级标签页内部嵌套另一个 `Tabs` 组件作为二级菜单结构的一部分。通过条件渲染来控制何显示此部分的内容。 ```jsx <TabPane tab="含二级菜单的一级菜单" key="nested-tabs"> <NestedSubTabs /> </TabPane> // NestedSubTabs.jsx export default function NestedSubTabs() { return ( <> <h3>这是含有二级菜单的一级页面内容。</h3> <Tabs defaultActiveKey="sub-tab1"> <TabPane tab="二级菜单A" key="sub-tab1">Content A</TabPane> <TabPane tab="二级菜单B" key="sub-tab2">Content B</TabPane> </Tabs> </> ); } ``` 上述代码片段展示了如何利用 Ant Design 的 `Tabs` 组件构建一个多层导航体系。需要注意的是实际应用场景可能更加复杂,因此建议开发者根据具体业务逻辑调整布局与交互方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值