antd react tour 引导式访问组件解决ref获取不到的问题

我是用了Tab组件,tab分1,2,3步骤,直接用ref不对。所以我找了这种方式,使用原生获取dom

  const [ref1, setRef1] = useState(null);const [ref2, setRef2] = useState(null);const [ref3, setRef3] = useState(null);const [open, setOpen] = useState<boolean>(false);useEffect(() => {setRef1(document.getElementsByClassName('ant-tabs-tab')[0]);setRef2(document.getElementsByClassName('ant-tabs-tab')[1]);setRef3(document.getElementsByClassName('ant-tabs-tab')[2]);}, [])const steps: TourProps['steps'] = [{title: '',description: `1`,target: () => ref1,placement: 'bottom',},{title: '',description: `2`,target: () => ref2,},{title: '',description:`3 also support database data for reliable, efficient, secure and scalable data management.`,target: () => ref3,placement: 'bottom',nextButtonProps: {children: <span>Got It</span>,},},];const items: TabsProps['items'] = [{key: '1',label: 'Local',children: (<LocalData></LocalData>),},{key: '2',label: 'Cloud',children: (<CloudStorage></CloudStorage>),},{key: '3',label: 'SQL',children: (<SqlDatabases></SqlDatabases>),},];

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

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

相关文章

nextjs-在页面之间的导航跳转

原文链接&#xff1a;https://nextjs.org/learn/dashboard-app/navigating-between-pages 01-nextjs起步02-css样式03-处理字体和图片04-创建layouts 和pages 页面更多 在上一章中&#xff0c;您创建了仪表板布局和页面。现在&#xff0c;让我们添加一些链接&#xff0c;允许…

canvas : Cannot read properties of null (reading ‘getContext‘)

获取 canvas 元素的 getContext 方法时&#xff0c;canvas 元素尚未正确绑定。可以通过确保在渲染 PDF 文件之前&#xff0c;canvas 元素已经正确挂载到 DOM 来解决这个问题。 解决方法 确保 pdfCanvas 引用已经绑定到正确的 DOM 元素。确保在渲染 PDF 文件时&#xff0c;can…

【模型】5分钟了解决策树是一个什么模型

本站原创文章&#xff0c;转载请说明来自《老饼讲解-机器学习》[www.bbbdata.com(https://www.bbbdata.com/ml) 决策树模型是机器学习中不可不学的模型之一&#xff0c;本文简单直接地快速讲解决策树是什么&#xff0c;如何实现。 一、决策树模型 决策树一般包括ID3决策树&am…

【JS问题】require相对路径引入模块

潜在问题 安全性问题&#xff1a;使用相对路径来引入模块可能会带来安全隐患&#xff0c;尤其是如果这段代码运行在客户端&#xff08;比如Node.js的Electron框架&#xff09;且相对路径可以被用户控制的情况下。恶意用户可能会尝试修改路径来访问不应该被访问的文件。 模块路…

记录一个笔误引发的bug导致生产环境报错,但是本地环境,测试环境运行正常

记录一个笔误引发的bug导致生产环境报错&#xff0c;但是本地环境&#xff0c;测试环境运行正常 因为headers请求头过长导致报错 在feign外调其他系统时候&#xff0c;是重新封装headers 问题在于 MultiValueMap 属于静态变量。这里讲userAgent的内容传递过去。是不断累加的…

Java 应用的部署和运维方法,包括 Tomcat、Docker 等

Java应用的部署和运维是一个复杂且多样的过程&#xff0c;包括从代码编写到应用上线&#xff0c;再到应用的持续维护和优化。 一、基于Tomcat的Java应用部署和运维 1. 环境准备 操作系统&#xff1a;选择适合运行Java和Tomcat的操作系统&#xff0c;常见的有Ubuntu、CentOS等…

如何遍历STL容器

在C中&#xff0c;遍历STL&#xff08;Standard Template Library&#xff09;容器通常可以通过多种方法来完成。以下是几种常用的遍历STL容器的方法&#xff1a; 1. 使用迭代器&#xff08;Iterator&#xff09; 迭代器是STL中用于遍历容器的主要工具。它们提供了一种通用方…

Qt项目天气预报(8) - 绘制温度曲线 + 回车搜索(最终篇)

全部内容在专栏&#xff1a; Qt项目 天气预报_mx_jun的博客-CSDN博客 目录 绘制温度曲线 事件过滤器在子控件上绘图 子控件下载事件过滤器 事件过滤器进行绘图 - eventFilter 画初步高温曲线 画初步低温曲线 效果演示 画低温曲线 画高温曲线 效果演示 按下回车搜索: …

【C++PCL】点云处理点云密度计算

作者:迅卓科技 简介:本人从事过多项点云项目,并且负责的项目均已得到好评! 公众号:迅卓科技,一个可以让您可以学习点云的好地方 重点:每个模块都有参数如何调试的讲解,即调试某个参数对结果的影响是什么,大家有问题可以评论哈,如果文章有错误的地方,欢迎来指出错误的…

收银系统源码-千呼新零售2.0【宠物、养生、大健康行业解决方案】

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物、中医养生、大健康等连锁店…

什么是 java 序列化,如何实现 java 序列化

Java序列化是将对象的状态转换为字节流的过程&#xff0c;这样对象的状态可以被存储在文件、数据库中&#xff0c;或者通过网络传输给另一个Java虚拟机&#xff08;JVM&#xff09;。反序列化是相反的过程&#xff0c;即从字节流中重建对象的状态。 为什么需要序列化&#xff…

Web渗透:文件上传漏洞

文件上传漏洞&#xff08;File Upload Vulnerability&#xff09;是网络安全中的一种常见漏洞&#xff0c;攻击者可以通过此漏洞将恶意文件上传到服务器&#xff0c;从而执行任意代码、覆盖重要文件、或进行其他恶意操作。这种漏洞可能带来严重的安全风险&#xff0c;包括数据泄…

Python里的类型list是什么?

在Python中&#xff0c;list&#xff08;列表&#xff09;是一种内置的数据类型&#xff0c;用于存储有序的元素集合。这些元素可以是任何数据类型&#xff08;整数、浮点数、字符串、其他列表等&#xff09;&#xff0c;并且它们不需要是同一种数据类型。 列表使用方括号 [] 表…

在 PMP 考试中,项目管理经验不足怎么办?

在项目管理的专业成长之路上&#xff0c;PMP认证如同一块里程碑&#xff0c;标志着从业者的专业水平达到了国际公认的标准。然而&#xff0c;对于那些项目管理经验尚浅的考生来说&#xff0c;这座里程碑似乎显得有些遥不可及。那么&#xff0c;在PMP考试准备中&#xff0c;项目…

【LeetCode】Hot100:验证二叉搜索树

给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉搜索树。 英文题目 Given the root…

【代码随想录算法训练营第四十八天|188.买卖股票的最佳时机IV、309. 买卖股票的最佳时机含冷冻期、714. 买卖股票的最佳时机含手续费】

文章目录 188.买卖股票的最佳时机IV[309. 买卖股票的最佳时机含冷冻期](https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-with-cooldown/description/) 188.买卖股票的最佳时机IV 和前几个一样&#xff0c;dp数组变大到[n][2k1]&#xff0c;推导公式也一样。 …

考大学能改变命运吗?不能

今天高考出分&#xff0c;今天早上就有朋友问我这个分怎么选学校怎么选专业。 &#xff08;1&#xff09; 我先跟他说的是选专业。 我说未来十年&#xff0c;中国会呈现M型社会&#xff1a; 要么你牛&#xff0c;做卡脖子突破&#xff0c;会就是会、不会就是不会 要么你不牛&…

AI技术在呼吸健康诊断领域的前沿进展

近期&#xff0c;谷歌科研团队在《自然》杂志上发布了一项引人注目的研究成果&#xff0c;该研究聚焦于利用人工智能&#xff08;AI&#xff09;技术对人类咳嗽及呼吸音进行分析&#xff0c;以实现对个体健康状况的精准评估。这一创新系统的研发基于大规模音频数据的深度学习&a…

C++STL 6大组件—你必知必会的编程利器

课程总目录 文章目录 一、vector容器二、deque和list容器三、vector、deque、list横向对比四、详解容器是配置stack、queue、priority_queue五、无序关联容器六、有序关联容器七、迭代器八、函数对象九、泛型算法和绑定器 一、vector容器 底层数据结构是动态开辟的数组&#x…

Ai指令优化文章成爆款实战记录6.26

大家好&#xff0c;我是网创有方的站长&#xff0c;继上篇文章出来之后&#xff0c;立马测试了一翻&#xff0c;没想到第一篇就出来了小爆款。展现量当天3万多&#xff0c;阅读量也有7000多的一个数据。虽说不是很高&#xff0c;相比平常几十的阅读量来说&#xff0c;进步还是非…