Блог

Я пытаюсь использовать react-joyride для небольшого тура. До сих пор все работает нормально, но если реализовать пользовательскую подсказку, как описано в документации, это приведет к сбою TypeError: Invalid parameter: element must be an HTMLElement

Я попробовал использовать самый простой подход, потому что многие элементы в примере являются неопределенными классами. Это должно было просто что-то показать, чтобы я мог поиграть со стилем и реквизитом. Я также попытался использовать другие теги узлов или попытаться использовать полный пример кода и определить используемые классы с помощью чайников. Я также просмотрел некоторые другие демонстрации/образцы в сети, но безрезультатно.

У кого — нибудь есть идея, какие запросы на поездку или что я должен использовать?

Код, который я использую, таков:

 import Joyride from 'react-joyride'
import PageTourModal from './components/PageTourModal'
[...]

class pageTour [...]

render () {
[...]
    const mySseps = [
      {
        disableBeacon: true,
        target: '[tourtag="Overview"]',
        title: 'Get a quick overview',
        content:
          'Gives you a quick overview',
      },
      {
        disableBeacon: true,
        target: '[tourtag="information"]',
        title: 'Information',
        content: 'Quickly get all information about your account'
      },
      {
        disableBeacon: true,
        target: '[tourtag="troubleshoot"]',
        title: 'Troubleshoot section',
        content: 'Look here if you run into any problems'
      },
    ]

    return (<Joyride
      steps={mySseps}
      continuous
      disableOverlayClose
      hideBackButton
      tooltipComponent={PageTourModal}
    ></Joyride>)

 

 class PageTourModal

interface iPageTourModal {
  continuous: boolean // If the tour is continuous or not
  index: number // The current step's index
  isLastStep: boolean // The name says it all
  size: number // The number of steps in the tour
  step: any // The current step data
  backProps: any // The back button's props
  closeProps: any // The close button's props
  primaryProps: any // The primary button's props (Close or Next if the tour is continuous)
  skipProps: any // The skip button's props
  tooltipProps: any // The root element props (including ref)
}

const PageTourModal = ({
  continuous,
  index,
  isLastStep,
  size,
  step,
  backProps,
  closeProps,
  primaryProps,
  skipProps,
  tooltipProps,
}: iPageTourModal) => {
  return (<div>HELLO WORLD</div>)
}

export default PageTourModal
 

Чтобы кто-нибудь наткнулся на это: я нашел решение после нескольких часов поисков и попыток. Пользовательский компонент распознается как HTMLElement только в том случае, если tooltipProps он передается на главный узел. Наверное, я хотел, чтобы модал был слишком простым

 const PageTourModal = ({
  continuous,
  index,
  isLastStep,
  size,
  step,
  backProps,
  closeProps,
  primaryProps,
  skipProps,
  tooltipProps,
}: iPageTourModal) => {
  return (<div {...tooltipProps}>HELLO WORLD</div>)
}