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

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

如何使React-Joyride在Next.js应用程序中工作？

1 个答案: