React框架的Ant Design漫游组件的使用

import { Button, Space, Tour } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import { useRef } from 'react';
import { useLocalStorageState } from 'ahooks';function App() {// 使用useLocalStorageState管理引导状态，存储在浏览器localStorage中// 首次访问时默认值为true，引导自动显示// 用户关闭后会存储为false，后续访问不再显示const [open, setOpen] = useLocalStorageState('tour', { defaultValue: true });// 创建ref引用，用于定位引导步骤的目标元素const ref1 = useRef(null); // 对应"Upload"按钮const ref2 = useRef(null); // 对应"Save"按钮const ref3 = useRef(null); // 对应"更多操作"按钮// 定义引导步骤配置const steps = [{title: 'Upload File',description: 'Put your files here.',// 步骤内容区域支持自定义内容cover: (<imgalt="tour.png"src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"/>),// target函数返回ref引用的DOM元素，用于定位引导提示框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 (<div style={{ margin: '100px' }}>{/* 页面主内容区：三个功能按钮 */}<Space><Button ref={ref1}>Upload</Button><Button ref={ref2} type="primary">Save</Button><Button ref={ref3} icon={<EllipsisOutlined />} /></Space>{/* 引导组件：通过open状态控制显示/隐藏 */}<Touropen={open} // 控制引导是否显示steps={steps} // 引导步骤配置onClose={() => setOpen(false)} // 关闭引导时更新localStorage状态placement="bottom" // 统一设置提示框位置为目标元素下方// mask={false} // 默认启用遮罩层，突出显示当前引导元素/></div>);
}export default App;

显示