Question

我想为我的React App添加一个兜风或导游。我希望在用户首次使用它时显示它，并禁用后续频繁访问。我找到了这个库https://github.com/gilbarbara/react-joyride，但无法弄清楚如何禁用同一用户的后续访问？我可以使用localstorage或cookies来处理这个问题吗？怎么样？

Answer 1

是的，将它添加到localStorage是一个很好的解决方案。我使用以下函数来触发检查：

checkForInitialTour() {
  if (!localStorage.getItem('tourDone')) {
    localStorage.setItem('tourDone', true);
    this.joyride.reset();
    this.joyride.start(true);
  }
}

也可以在巡视后使用回调参数

在localstorage中进行设置

callback={(e) => { if (e.type === 'finished') { window.scrollTo(0, 0); localStorage.setItem('tourDone', true); } }}

Answer 2

如果您使用的是nextjs或服务器端渲染，这是我的方法：

状态已初始化：

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);
    }
  };

导游/ Joyride整合到我的网站

2 个答案: