React自定义步进器如何实现按索引跳转至指定步骤

现有代码无法支持按索引直接跳转，根源是两点：

• 顶部的跳转按钮没有绑定对应事件，缺少直接更新step状态到目标索引的触发入口
• 原顺序切换的逻辑里混了独立滚动判断，没有做统一的跳转封装，直接修改step时的滚动触发依赖useEffect，边界判断不足容易报错

1. 封装通用跳转方法 #

统一处理索引越界拦截、状态更新逻辑，原有上一步/下一步逻辑也可以复用这个方法，避免重复代码。

2. 给跳转按钮绑定点击事件 #

三个按钮分别对应索引0、1、2，点击时调用通用跳转方法传入对应索引即可。

3. 补全滚动逻辑的边界判断 #

在useEffect的滚动逻辑里加ref存在性校验，避免目标节点还没挂载时调用滚动方法报错。

const App: React.FC = (props: any) => {
  const [step, setStep] = useState(0);
  const refs = useRef<(HTMLDivElement | null)[]>([]);
  const totalStepCount = steps.length;

  // 通用跳转方法
  const jumpToTargetStep = (targetIndex: number) => {
    // 越界拦截，避免索引无效时报错
    if (targetIndex < 0 || targetIndex >= totalStepCount) return;
    setStep(targetIndex);
  };

  useEffect(() => {
    const targetNode = refs.current[step];
    // 节点存在才执行滚动
    if (targetNode) {
      scrollToComponent(targetNode);
    }
  }, [step]);

  return (
    <div className="App">
      {/* 绑定跳转事件 */}
      <button onClick={() => jumpToTargetStep(0)}>Move to Component A</button>
      <button onClick={() => jumpToTargetStep(1)}>Move to Component B</button>
      <button onClick={() => jumpToTargetStep(2)}>Move to Component C</button>

      {steps
        .filter((_, index) => index <= step)
        .map((Step, index) => (
          <Step
            key={index}
            domRef={(ref) => (refs.current[index] = ref)}
            // 复用统一跳转方法
            toPrev={() => jumpToTargetStep(index - 1)}
            toNext={() => jumpToTargetStep(index + 1)}
            setStep={setStep}
            step={index}
          />
        ))}
    </div>
  );
};

• 如果需要做步骤准入校验（比如必须完成当前步骤才能跳转后续步骤），直接在jumpToTargetStep方法里加判断逻辑即可，比如校验目标步骤的前置完成状态，不满足准入条件就直接拦截不更新状态
• 如果需要跳转后自动滚动时加偏移、或者自定义滚动动画，直接修改useEffect里的滚动实现即可，所有跳转（上一步、下一步、指定索引跳转）都会复用这套滚动逻辑
• 如果要支持步骤状态保留，只要不要在步骤隐藏时卸载组件，改用CSS的visibility: hidden或者height: 0; overflow: hidden做视觉隐藏即可，不需要改动核心跳转逻辑

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