react-joyride使用自定义tooltip报element must be an HTMLElement错误如何解决

报错原因 #

react-joyride 依赖自定义tooltip组件根节点的DOM引用来计算定位、处理交互逻辑，你当前的最简实现没有将入参中的tooltipProps绑定到组件根元素上，库无法获取到有效HTMLElement实例，因此抛出对应错误。

修复方法 #

仅需修改PageTourModal组件的返回值，将tooltipProps全量展开绑定到根元素即可，tooltipProps内部已包含库所需的ref属性和事件绑定：

const PageTourModal = ({
  continuous,
  index,
  isLastStep,
  size,
  step,
  backProps,
  closeProps,
  primaryProps,
  skipProps,
  tooltipProps,
}: iPageTourModal) => {
  // 核心修改：给根div绑定tooltipProps
  return (<div {...tooltipProps}>HELLO WORLD</div>)
}

其他可选优化 #

你代码中定义的步骤数组变量名mySseps存在拼写错误，虽然当前不影响运行，但建议修正为mySteps避免后续维护出错。
如果后续需要添加操作按钮，直接将对应的props绑定到对应按钮元素上即可，比如下一步按钮绑定primaryProps、返回按钮绑定backProps。

内容的提问来源于stack exchange，提问作者Markus