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

Question

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

它显示一秒钟，然后向下滚动到某个地方(即使我滚动到底部也看不到)。

我尝试了一些修复，例如:body { 最小高度: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

对于那些使用 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>
    </>
  )
}