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>
      ),
    },
  ];
相关推荐
codelang1 小时前
Cline + MCP 开发实战
前端·后端
好_快3 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel3 小时前
webpack 核心编译器 十四 节
前端
excel3 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队10 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰13 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪13 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪13 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试