能否将Ant Design Tour组件与Ant Design Table组件搭配使用？

完全可以将Ant Design Tour与Table组件搭配使用，核心是通过精准定位Table内的目标DOM元素来实现引导。下面是两种实用的实现方案：

方案1：通过CSS选择器定位元素 #

利用AntD Table渲染后生成的DOM属性（如data-row-key、data-column-key）作为选择器，比依赖类名更稳定（类名可能随版本变更）。

import { Tour, Table, Button } from 'antd';
import { useState } from 'react';

const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '地址', dataIndex: 'address', key: 'address' },
];

const data = [
  { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
  { key: '2', name: '李四', age: 42, address: '上海市浦东新区' },
];

const TourWithTable = () => {
  const [tourVisible, setTourVisible] = useState(false);

  const steps = [
    {
      title: '表格表头',
      description: '这是表格的表头区域，点击列名可排序',
      target: () => document.querySelector('.ant-table-thead'),
    },
    {
      title: '第一行数据',
      description: '这是表格的第一条数据记录',
      target: () => document.querySelector('.ant-table-tbody tr[data-row-key="1"]'),
    },
    {
      title: '年龄列',
      description: '点击此处可对年龄进行升/降序排序',
      target: () => document.querySelector('.ant-table-thead th[data-column-key="age"]'),
    },
  ];

  return (
    <>
      <Button onClick={() => setTourVisible(true)}>开启引导</Button>
      <Table columns={columns} dataSource={data} />
      <Tour
        open={tourVisible}
        steps={steps}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
};

export default TourWithTable;

注意点： #

• 使用函数形式的target而非直接传字符串选择器，确保Table渲染完成后再获取DOM元素，避免找不到目标的问题。
• 若表格是异步加载数据，需等待数据加载完成后再开启Tour（比如通过useEffect监听数据状态）。

方案2：通过React Ref精准定位 #

如果需要定位表格内的某个具体单元格或自定义元素，用React Ref会更可靠，尤其适合动态渲染的场景。

import { Tour, Table, Button } from 'antd';
import { useState, useRef } from 'react';

const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { 
    title: '年龄', 
    dataIndex: 'age', 
    key: 'age',
    // 给单元格元素绑定ref
    render: (text, record) => <span ref={el => rowRefs.current[record.key] = el}>{text}</span>,
  },
  { title: '地址', dataIndex: 'address', key: 'address' },
];

const data = [
  { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
  { key: '2', name: '李四', age: 42, address: '上海市浦东新区' },
];

const TourWithTableRef = () => {
  const [tourVisible, setTourVisible] = useState(false);
  const rowRefs = useRef({});

  const steps = [
    {
      title: '李四的年龄',
      description: '这是李四的年龄数据，支持编辑',
      target: () => rowRefs.current['2'],
    },
  ];

  return (
    <>
      <Button onClick={() => setTourVisible(true)}>开启引导</Button>
      <Table columns={columns} dataSource={data} />
      <Tour
        open={tourVisible}
        steps={steps}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
};

export default TourWithTableRef;

优势： #

• 不受DOM结构变更影响，定位更精准。
• 可以直接绑定到自定义渲染的元素上，灵活度更高。

内容的提问来源于stack exchange，提问作者dkrylov.com