解决使用antd的tour组件时，想要利用ref定位menu组件却失败的问题

本人使用的是react+typescipt，用到antd的tour组件时产生了如题所示的问题

下面是antd官方文档中的代码示例

import React, { useRef, useState } from 'react';
import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Divider, Space, Tour } from 'antd';
import type { TourProps } from 'antd';

const App: React.FC = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const [open, setOpen] = useState<boolean>(false);

  const steps: TourProps['steps'] = [
    {
      title: 'Upload File',
      description: 'Put your files here.',
      cover: (
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        />
      ),
      target: () => ref1.current,
    },
    {
      title: 'Save',
      description: 'Save your changes.',
      target: () => ref2.current,
    },
    {
      title: 'Other Actions',
      description: 'Click to see other actions.',
      target: () => ref3.current,
    },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Begin non-modal Tour
      </Button>

      <Divider />

      <Space>
        <Button ref={ref1}> Upload</Button>
        <Button ref={ref2} type="primary">
          Save
        </Button>
        <Button ref={ref3} icon={<EllipsisOutlined />} />
      </Space>

      <Tour open={open} onClose={() => setOpen(false)} mask={false} type="primary" steps={steps} />
    </>
  );
};

export default App;

其中使用tour需要用到steps来定义每一步的描述，并且在每一步将对应元素的ref赋值给target从而在页面上定位对应的元素。绑定别的按钮元素时没有出现问题，但在绑定antd封装的menu组件时出现问题，页面无法加载。

解决方法：查找文档发现target接收的是HTMLElement类型，而在控制台输出绑定的menu的ref发现其结构为：

显然是类型错误导致的，因此找到里面的list元素即可解决，即从

target: () => ref1.current

改为

target: () => ref1.current.menu.list

即可解决。

绑定其他组件时如果出现类似typeerror报错也可以尝试使用类似的办法解决