如何让 react-joyride 在 Next.js 应用程序中工作？答案

【问题标题】：How to get react-joyride to work in a Next.js app?如何让 react-joyride 在 Next.js 应用程序中工作？
【发布时间】：2019-08-28 05:02:37
【问题描述】：

我需要在应用程序中使用 Next.js 进行多个导览我尝试在父组件中添加react-joyride 来显示导览。

它显示一秒钟，然后向下滚动到某个地方（即使我滚动到底部也不可见）。

我尝试了一些修复，例如： body { min-height: 100%; } 但是还是不行。

这是步骤配置：

steps: [
    {
      target: document.getElementById('step-1'),
      content: 'This is my awesome feature!',
      title: 'This is my awesome feature!',
      // isFixed: true
      disableBeacon: true
    },
    {
      target: document.getElementById('step-2'),
      content: 'This another awesome feature!',
      title: 'This another awesome feature!',
      // isFixed: true
      disableBeacon: true
    },
    {
      target: document.getElementById('step-3'),
      content: 'This another awesome feature 3!',
      title: 'This another awesome feature 3!',
      // isFixed: true,
      disableBeacon: true
    }
]

而且，这就是我在组件中的调用方式：

  <Joyride
    run={showTour}
    steps={steps}
    debug
    showProgress
    disableScrolling={false}
    disableScrollParentFix
    showSkipButton
    continuous
  />

【问题讨论】：

我现在也遇到同样的问题，请问您是怎么解决的？
嗨@NicolasMeienberger，我找不到让它在我们的应用程序中工作的方法，并切换到另一个库，即LinkedIn 的Hopscotch（这里是URL：linkedin.github.io/hopscotch）。事实证明，按照我们的要求实施和工作相对容易。让我知道这是否有帮助。 :)
快速更新：所有者最近将图书馆标记为从现在开始不再维护。这是存储库的链接 (github.com/LinkedInAttic/hopscotch)。

标签： next.js

【解决方案1】：

对于那些在 Joyride 和 Next.js 中出现 can't render div inside a div 错误的人——我通过不使用服务器端渲染 Joyride 来解决这个问题：

import dynamic from 'next/dynamic'

const JoyRideNoSSR = dynamic(
  () => import('react-joyride'),
  { ssr: false }
)

const ExampleComponent = (props) => {
  return (
    <>
      <JoyrideNoSSR
        steps={[{ target: '#first-step', content: 'Click it bud' }]}
      />
      <button id="first-step">
        Click me
      </button>
    </>
  )
}

【讨论】：