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

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

javascript 复制代码
  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>
      ),
    },
  ];
相关推荐
志存高远662 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_14 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue33 分钟前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app