【antd之tabs踩坑篇】Tabs有items时切换不起作用

news2024/12/23 0:35:22

在这里插入图片描述

<Tabs
   defaultActiveKey="1"
   tabPosition={mode}
   style={{ height: 220 }}
   items={new Array(30).fill(null).map((_, i) => {
     const id = String(i);
     return {
       label: `Tab-${id}`,
       key: id,
       disabled: i === 28,
       children: `Content of tab ${id}`,
     };
   })}
 />

官网上如果tabs有很多item的话,能正常切换,但是我在本地要复现这个功能时,创建数组形式的items时,死活都切不过去

于是,我就对着官网上的例子,一步一步看,发现items里key是String形式的,但是我的key是Number形式的,于是我改写为 key: index + '1',就好了

如果需要写很多tabs的items时,一定要注意key为字符串形式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/832235.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

jmeter使用:解决压测时获取token问题

在执行压测过程中&#xff0c;首先要执行登录接口来获取token。如果并发数比较大只需要一个用户的登录token&#xff0c;可以使用setup线程组。如果是模拟多个用户登录获取token&#xff0c;需要使用仅一次控制器。 一、添加setup thread group前置线程 1.在并发量比较高的情况…

代码随想录算法训练营day53

文章目录 Day53 最长公共子序列题目思路代码 不相交的线题目思路代码 最大子序和题目思路代码 Day53 最长公共子序列 1143. 最长公共子序列 - 力扣&#xff08;LeetCode&#xff09; 题目 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长公共子序列的长度…

最新AWVS 支持Windows/Linux

最新AWVS15.7.230603143 支持Windows/Linux 现只需要运行bat、sh脚本就可以一键破解。 修改hosts文件&#xff08;C:\Windows\System32\drivers\etc\hosts&#xff09; 127.0.0.1 updates.acunetix.com127.0.0.1 erp.acunetix.com127.0.0.1 bxss.me127.0.0.1 te…

【Linux命令200例】whereis用于搜索以及定位二进制文件

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜…

网站是如何进行访问的?在浏览器地址栏输入网址并回车的一瞬间到页面能够展示回来,经历了什么?

这个问题是检验web和计网学习程度的经典问题。 网站访问流程&#xff1a; 1.域名->ip地址 1) 在输入完一个域名之后&#xff0c;首先是检查浏览器自身的DNS缓存是否有相应IP地址映射&#xff0c;如果没有对应的解析记录&#xff0c;浏览器会查找本机的hosts配置文件&…

【Clion 2】使用技巧

一、TODO: 说明&#xff1a; 有时需要标记部分代码以供将来参考&#xff1a; 优化和改进的领域、可能的更改、要讨论的问题等等。 支持&#xff1a; TODO和FIXME小写和大写。这些模式可以在任何受支持的文件类型的行注释和块注释内使用。 创建TODO项 在要添加注释的代码行中…

数据中心这个隐藏技巧,你一定要掌握!

在数字化时代&#xff0c;数据中心成为现代社会不可或缺的基础设施&#xff0c;它们承载着海量数据的存储、处理和传输&#xff0c;为各行各业的运营提供着坚实的支持。 然而&#xff0c;数据中心的稳定性和可靠性对于确保持续性运营至关重要。在数据中心中&#xff0c;蓄电池系…

KK集团再闯港交所:引领潮流零售市场,2023年一季度业绩增势显著

撰稿|行星 来源|贝多财经 7月31日&#xff0c;KK Group Company Holdings Limited&#xff08;下称“KK集团”&#xff09;在港交所更新招股书&#xff0c;补充了截至2023年3月31日的财务数据等信息&#xff0c;继续推进上市事宜&#xff0c;摩根士丹利和瑞信为其联席保荐人。…

NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 论文阅读

论文信息 题目&#xff1a;NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 作者&#xff1a;Antoni Rosinol, John J. Leonard&#xff0c; Luca Carlone 代码&#xff1a;https://github.com/ToniRV/NeRF-SLAM 来源&#xff1a;arxiv 时间&#xff…

【MYSQL】DataGrip连接linux本地mysql失败:Connection refused

防火墙需要开放3306端口 sudo ufw allow 3306 要么就把防火墙关了&#xff1a; sudo ufw disablemysql开放连接 记住你的密码 ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password by 123456;修改配置文件 sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf这个…

PostgreSQL 查询每个用户最后的登录时间多种方法

登录表&#xff0c;查询登录过的用户名 select username from system_online_users group by username;简单查询每个用户最后的登录时间 select username, max(login_time) from system_online_users group by username;查询 admin 最早和最后的登录时间 select username, m…

StreamSaver.js入门教程:优雅解决前端下载文件的难题

theme: smartblue 本文简介 本文介绍一个能让前端优雅下载大文件的工具&#xff1a;StreamSaver.js ⚡️ StreamSaver.js GitHub地址⚡️ 官方案例 StreamSaver.js 可用于实现在Web浏览器中直接将大文件流式传输到用户设备的功能。 传统的下载方式可能导致大文件的加载时间较长…

【二等奖方案】Web攻击检测与分类识别赛题「爆汁大橘少糖」团队解题思路

2022 CCF BDCI 数字安全公开赛 赛题「Web攻击检测与分类识别」 地址&#xff1a;http://go.datafountain.cn/4Zj 爆汁大橘少糖战队获奖方案 团队简介 团队成员来自海康威视研究院&#xff0c;目前从事大数据算法相关的工作&#xff0c;具有丰富的数据挖掘实践经验。曾获得过…

腾讯测试大佬分享4个关于 Python 函数(方法)的冷知识

关于参数标识 不知道大家在工作中有没有遇到一种情况&#xff0c;你的同事 A 写了一个方法给你调用&#xff0c;然后你调用时不知道该传什么参数&#xff0c;然后这个同事 A 还很 cao dan 的居然不加班&#xff01;你一脸茫然的看着这个方法&#xff0c;当你尝试传进去一个 ab…

极狐GitLab 全新「价值流仪表盘」使用指南

本文来源&#xff1a;about.gitlab.com 作者&#xff1a;Haim Snir 译者&#xff1a;极狐(GitLab) 市场部内容团队 GitLab / 极狐GitLab 价值流仪表盘的使用相对简单&#xff0c;这种可以定制化的仪表盘能够让决策者识别数字化转型进程中的趋势及机遇。 如果你已经在用 GitLab…

【FAQ】调用EasyDSS返回的直播快照接口,无法编辑只能新建的原因排查与解决

EasyDSS视频直播点播平台集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体&#xff0c;可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务&#xff0c;在应用场景上&#xff0c;平台可以运用在互联网教育、在线课堂、游戏直播等领域…

Couldn‘t lock the file :/tmp/bbc-filesystem-base_syscache_service

解决方案&#xff1a; 进去带这个目录&#xff0c;然后切换成root用户&#xff0c;将它删除

17. Spring 事务

目录 1. 事务定义 2. MySQL 中的事务使用 3. 没有事务时的插入 4. Spring 编程式事务 5. Spring 声明式事务 5.1 Transactional 作用范围 5.2 Transactional 参数说明 5.3 Transactional 工作原理 1. 事务定义 将⼀组操作封装成一个执行单元&#xff08;封装到一起…

LBP特征笔记

LBP&#xff0c;局部二值模式&#xff08;Local Binary Pattern&#xff09;&#xff0c;是一种描述图像局部纹理特征的方式&#xff0c;具有旋转不变性和灰度不变性。首先由T. Ojala, M.Pietikinen, 和 D. Harwood 在1994年提出。 LBP特征描述 基础LBP算子 基础的LBP算子定义…

什么是耗尽型MOS管

我们常用的MOS管属于增强型MOS管&#xff0c;对于N沟道增强型MOS管&#xff0c;需要UGS大于开启电压&#xff0c;MOS管才能导通。 其实还有一种MOS管&#xff0c;当UGS大于0&#xff0c;等于0&#xff0c;小于0时MOS管都能导通&#xff0c;这种MOS管叫做耗尽型 MOS管。 以N沟道…