如何基于设备/屏幕尺寸控制React TourProvider特定步骤显隐？

核心问题在于React Tour是基于初始化时传入的steps数组渲染引导流程的，仅靠切换元素类名无法让Tour自动识别并隐藏对应步骤。你需要动态过滤引导步骤数组，根据当前设备状态传递符合条件的步骤给TourProvider。

实现步骤 #

1. 定义带设备标识的完整步骤数组
   给每个步骤添加专属标识，区分移动端、桌面端或通用步骤：

   const allSteps = [
     {
       selector: '.desktop-nav',
       content: '桌面端导航栏操作指引',
       isDesktopOnly: true
     },
     {
       selector: '.mobile-login-create',
       content: '移动端菜单入口指引',
       isMobileOnly: true
     },
     {
       selector: '.user-profile',
       content: '个人中心操作说明'
     }
   ];
   

2. 动态过滤步骤数组
   结合useMediaQuery的设备状态，过滤出当前设备需要显示的步骤，用useMemo优化性能：

   import React from 'react';
   import { useMediaQuery } from '@material-ui/core';
   import { TourProvider } from '@reactour/tour';
   
   const AppTour = ({ children }) => {
     const isMobile = useMediaQuery('(max-width: 991px)');
   
     // 过滤适配当前设备的步骤
     const filteredSteps = React.useMemo(() => {
       return allSteps.filter(step => {
         if (step.isMobileOnly) return isMobile;
         if (step.isDesktopOnly) return !isMobile;
         // 通用步骤始终保留
         return true;
       });
     }, [isMobile]);
   
     return (
       <TourProvider 
         steps={filteredSteps}
         // 其他Tour配置项
         maskClassName="tour-mask"
         rounded={5}
       >
         {children}
       </TourProvider>
     );
   };
   

3. 页面元素保持原有逻辑
   你之前的类名切换逻辑可以保留，确保引导元素在对应设备下存在：

   {!onPreview && (
     <div className={`${isMobile ? "mobile-login-create" : ""} showmenu`} onClick={menuHandler}>
       <i className="fa fa-bars" aria-hidden="true"></i>
     </div>
   )}
   

替代方案：通过选择器名称过滤 #

如果不想给步骤加标识，也可以直接根据选择器的命名规则判断：

const filteredSteps = React.useMemo(() => {
  return allSteps.filter(step => {
    const isMobileStep = step.selector.includes('mobile');
    const isDesktopStep = step.selector.includes('desktop');
    
    if (isMobileStep) return isMobile;
    if (isDesktopStep) return !isMobile;
    return true;
  });
}, [isMobile]);

关键说明 #

• 当屏幕尺寸变化时，useMediaQuery会更新isMobile状态，触发filteredSteps重新计算，TourProvider会自动适配新的步骤列表。
• 如果引导流程正在进行中切换设备，Tour会自动跳转到下一个有效的步骤，不会出现找不到元素的错误。

内容的提问来源于stack exchange，提问作者JAVIER MONTENEGRO