React Joyride：步骤跳过，工具提示不显示，重置不起作用

Question

我花了几个小时试图掌握React Joyride，但遇到了一些问题。我创建了一个sandbox 来展示我遇到的困难：

1. 当我单击“下一步”时，工具提示会变为信标，但我不希望它如此，而且我不明白为什么这一步会发生这种情况而不是后续步骤？
2. 它也会跳过 Step2 (stepIndex 1)。为什么会这样？我该如何阻止它？
3. 当我将 stepIndex 重置为 0 并将 run 设置为 true 时，我希望工具提示会显示在第 1 步。为什么没有发生这种情况？
4. 当我单击“返回”时，它不会返回。 Joyride 的行为就像我点击了“下一步”一样。

Answer 1

你的沙盒工作不正常，检查一下

Answer 2

我从创建者那里得到了answer。

1. 当我单击“下一步”时，工具提示会变为信标，但我不希望它如此，而且我不明白为什么在这一步而不是后续步骤中会发生这种情况？李>

不知道为什么会这样（可能是因为 Joyride 组件在状态更改之间再次渲染）。 但是回调被调用了两次，类型为 EVENTS.STEP_AFTER 和索引 0，因此它增加了 stepIndex 两次。 0 -> 2

将条件改为：

else if (data.index === stepIndexState && (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND))

1. 它也会跳过 Step2 (stepIndex 1)。为什么会这样？我该如何阻止它？

（回答第 1 点）

1. 当我将 stepIndex 重置为 0 并将 run 设置为 true 时，我希望工具提示会显示在第 1 步。为什么没有发生这种情况？

它正在发生。

4. 当我单击“返回”时，它不会返回。 Joyride 的行为就像我点击了“下一步”一样。

由于您正在控制游览，因此您需要考虑action。 setStepIndexState((prev) => prev + (action === ACTIONS.PREV ? -1 : 1))