导游/兜风集成到我的网站

2022-01-19 00:00:00 reactjs web frontend javascript

我想为我的 React 应用添加兜风或导游.我想在用户第一次使用它时显示它，并为随后的频繁访问禁用它.我找到了这个库 https://github.com/gilbarbara/react-joyride 但不能不知道如何在同一用户的后续访问中禁用?我可以使用 localstorage 或 cookie 来处理这个问题吗?怎么样?

I want to add a joyride or guided tour for my React App. I want to show it when the users first uses it and disable for subsequent frequent visits. I have found this library https://github.com/gilbarbara/react-joyride but couldn't figure out how to disable on subsequent visits by same user? Can I use localstorage or cookies to deal with this issue? How?

推荐答案

如果你使用的是nextjs或者服务端渲染，这是我的做法:

If you're using nextjs or server-side rendering, here's my approach:

状态已初始化:

runJoyride: (typeof window === 'undefined')? false : window.localStorage.getItem('onboarded') === null,

然后你回电:

handleJoyrideCallback = data => {
    const { action, index, status, type } = data;

    if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      this.setState({ runJoyride: false });
      window.localStorage.setItem('onboarded', true);
    }
  };

相关文章