React导航步骤数组：禁用后续步骤，保留历史步骤可访问

问题分析 #

你现有的禁用逻辑isDisabled = i > (i + stepLength - 1) % stepLength完全没有结合实际的完成状态，只是基于当前索引做了无意义的循环计算，必然不符合需求。要实现已完成的历史步骤可访问，后续步骤全禁用，核心是要跟踪当前已完成的最大步骤索引，而非依赖索引的循环运算。

正确实现方案 #

1. 首先定义状态跟踪已完成的最大步骤索引（假设初始完成第1步，对应数组索引0）：

import { useState } from 'react';

const [completedStepIndex, setCompletedStepIndex] = useState(0);

2. 遍历步骤数组时，直接通过当前索引与已完成索引对比计算禁用状态：

const steps = ['步骤1', '步骤2', '步骤3', '步骤4']; // 示例步骤数组
const stepLength = steps.length;

return (
  <div className="steps-container">
    {steps.map((step, i) => {
      const isDisabled = i > completedStepIndex;
      return (
        <div
          key={i}
          className={`step-item ${isDisabled ? 'disabled' : ''}`}
          style={{ pointerEvents: isDisabled ? 'none' : 'auto' }}
        >
          {step}
        </div>
      );
    })}
  </div>
);

逻辑说明 #

• 当completedStepIndex = 2（即完成到第3步）时：
  • 索引0、1、2的步骤：i > 2为false → 可访问
  • 索引3的步骤：i > 2为true → 禁用
• 后续完成新步骤时，只需要更新completedStepIndex的值（比如调用setCompletedStepIndex(3)），就能自动更新所有步骤的禁用状态。

额外提示 #

如果你的步骤显示是从1开始计数（比如步骤1对应数组索引0），只需确保completedStepIndex始终对应已完成步骤的数组索引即可，无需调整禁用逻辑。

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