React Joyride遇‘Target not mounted’问题：模态框引导步骤跳步

问题根源 #

你遇到的核心问题是：当从第3步触发模态框打开后，Joyride会立刻尝试定位第4步的模态框内元素，但此时模态框还未完成渲染/挂载，导致触发Target not mounted警告并直接跳至第5步。固定时长的setTimeout不可靠，因为模态框渲染时间可能受环境影响波动。

修复方案 #

我们需要让Joyride在打开模态框时暂停，等待目标元素完全挂载后再继续执行第4步，具体调整如下：

1. 修改Joyride回调函数

在回调中拦截第3步到第4步的自动跳转，先暂停Joyride再打开模态框：

const handleJoyrideCallback = (data: any) => {
  const { action, index, status, type } = data;
  const nextStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);

  // 拦截第3步的NEXT操作：先暂停Joyride，再打开模态框
  if (action === ACTIONS.NEXT && index === 3) {
    setState(prev => ({ ...prev, run: false }));
    openModal(true);
    return;
  }

  // 跳过模态框步骤的重试逻辑，避免跳至第5步
  if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type) && index !== 3) {
    setState({ run: false, loading: true });
    setTimeout(() => {
      setState({
        loading: false,
        run: true,
        stepIndex: nextStepIndex,
      });
    }, 2000);
  } else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
    setState({ run: false });
    setJoyride(false);
  } else if (type === EVENTS.TOOLTIP_CLOSE) {
    setState({ stepIndex: index + 1 });
  }
};

2. 添加监听逻辑等待模态框元素挂载

通过useEffect监听模态框状态，循环检查目标元素是否存在，确认后再恢复Joyride：

import { useEffect } from 'react';

useEffect(() => {
  // 仅在模态框打开且Joyride暂停时执行
  if (isModalOpen && !state.run) {
    let checkInterval: NodeJS.Timeout;

    const checkTargetExists = () => {
      // 替换为你模态框内目标元素的实际选择器
      const targetElement = document.querySelector('#modal-target-element');
      
      if (targetElement) {
        // 目标元素存在，恢复Joyride并跳至第4步
        setState(prev => ({
          ...prev,
          run: true,
          stepIndex: 4
        }));
        clearInterval(checkInterval);
      }
    };

    // 每100ms检查一次，直到目标元素出现
    checkInterval = setInterval(checkTargetExists, 100);

    // 组件卸载时清理定时器
    return () => clearInterval(checkInterval);
  }
}, [isModalOpen, state.run]);

关键注意事项 #

• 确保第4步的Joyride配置中，target字段与模态框内元素的选择器完全匹配
• 模态框需使用条件渲染（如{isModalOpen && <Modal />}），确保元素仅在模态框打开时存在

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