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

Question

我需要使用 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
  />

Answer 1

对于那些can't render div inside a div在 Joyride 和 Next.js 中出现错误的人——我通过不在服务器端渲染 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>
    </>
  )
}