根据用户的设备隐藏或显示 React TourProvider 的特定步骤

Question

有谁知道是否可以根据用户的屏幕尺寸或设备（桌面或移动设备）隐藏或显示 React TourProvider 的特定步骤？我试图根据用户的设备显示不同的步骤，因为由于屏幕的响应，元素可能会呈现不同的效果。我尝试执行以下操作来找出屏幕的尺寸：

import { useMediaQuery } from '@material-ui/core';

const isMobile = useMediaQuery('(max-width: 991px)');

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

事实上，当我在 Google 上检查时，mobile-login-create 类（它是我尝试在页面中显示的步骤列表的对象数组中的选择器之一）正在基于 isMobile 进行隐藏或显示Chrome 开发工具。但是，即使该类已从指定的 div 中删除或未删除，我需要隐藏的步骤仍然显示在页面上。我还尝试在文档https://www.npmjs.com/package/@reactour/tour上找到关于我的问题的内容，但我没有运气。

import { useMediaQuery } from '@material-ui/core';

const isMobile = useMediaQuery('(max-width: 991px)');

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

Answer 1

您可以尝试使用

useTour

props，例如

setSteps

，执行以下操作：

useEffect(() => {
  if (isMobile) {
    setSteps(mobileSteps);
  } else {
    setSteps(steps);
  }
}, [isMobile]);

这里是一个工作示例