reactjs - 如何在nextjs中第一次显示reactour？

Question

我正在使用 reactour在 next.js 中
我要第一次当页面被渲染时 react 堆显示，当路由改变并回到这个页面时 react 堆不显示
怎么能做到这一点？

this is how I call it

import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
import dynamic from "next/dynamic";
const Tour = dynamic(() => import("reactour"), { ssr: false });

const tourConfig = [
  {
    selector: ".step_1",
    content:
      'Click "View future forecast earning" to look at all....',
  },
  {
    selector: ".step_2",
    content:
      "Chose different earning forecasts to see how your property...",
  },
];


export default function MyPage(props) {
  const disableBody = target => disableBodyScroll(target);
  const enableBody = target => enableBodyScroll(target);
  const [isTourOpen, setIsTourOpen] = useState(false);
  const closeTour = () => setIsTourOpen(false);

useEffect(() => {
    const timing = setTimeout(() => {
      setIsTourOpen(true);
    }, 2000);
    return () => {
      clearTimeout(timing);
    };
  }, []);

  return (
    <>
      <OtherComponent />
      <Tour
        onRequestClose={closeTour}
        steps={tourConfig}
        isOpen={isTourOpen}
        rounded={5}
        onAfterOpen={disableBody}
        onBeforeClose={enableBody}
        className={classes.root}
        disableInteraction
        inViewThreshold={50}
      />
    </>
  );
}

Answer 1

您可以设置条件并将值添加到 localStorage喜欢吹:

localStorage.setItem('playTour', 'true');

当您第一次参加巡回赛时，您可以将此值设置为 false