react-joyride不接受自定义工具提示

Question

我正在尝试使用react-joyride进行小型旅行。到目前为止，一切工作正常，但如果实现文档中描述的自定义工具提示，则会失败TypeError: Invalid parameter: element must be an HTMLElement

我尝试了最基本的方法，因为示例中的许多元素都是未定义的类。本来是要展示点什么的，这样我就可以摆弄一下造型和道具了。我还尝试使用其他节点标记，或者尝试使用完整的代码样例，并使用假人定义使用的类。我还在网上查找了一些其他的演示/样本，但无济于事。

谁有一个想法，什么joyride要求或我必须使用什么?

我使用的代码是:

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

Answer 1

对于任何偶然发现这个的人:经过几个小时的寻找和尝试，我找到了解决办法。只有当tooltipProps传递给主节点时，自定义组件才会被识别为HTMLElement。我想我把模态设置得太简单了

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