React经验值进度条开发：如何计算升级差值并归一化到100刻度展示

你当前代码的错误点有两个：

1. 2级及以上的进度条value赋值逻辑反了：进度条的value需要对应当前等级已完成的经验值，而你传的是剩余未获得的经验值，会出现经验越高进度条反而越短的问题。
2. 1级进度条的max设为99不合理，应该所有等级统一将max固定为100，不然99点经验时进度条就满了，100点经验跳级时会出现显示断层。

另外你用多个if-else逐个判断等级的写法过于冗余，可直接用通用公式计算所有等级的对应数据，无需重复写10次判断逻辑。

计算逻辑说明 #

• 每级固定需要100点经验，直接通过经验值整除就能得到当前等级
• 减去当前等级的起始经验值，就能得到当前等级已获得的经验，也就是进度条需要的value值，进度条max统一固定为100即可
• 升级所需经验直接用100减去当前等级已获得的经验即可

优化后完整代码 #

// 等级对应称号，按等级顺序排列，你可以自己补全到10级的称号
const LEVEL_TITLES = [
  '', // 占位，索引0不用，方便直接用等级取
  'Novice',
  'Monk',
  // 继续补3-10级的称号
  '满级'
]

const ExperienceLevel = () => {
  const exp = userData.experience
  // 最高10级处理
  if (exp >= 1000) {
    return (
      <>
        <p className="experience__show--level"> Level 10: 满级 </p>
        <small className="experience__show--level--coming">
          <i>你已达到最高等级</i>
        </small>
        <progress
          className="experience__progression-bar__bar"
          value={100}
          max="100"
        ></progress>
      </>
    )
  }
  // 通用计算逻辑
  const currentLevel = Math.floor(exp / 100) + 1
  const levelStartExp = (currentLevel - 1) * 100
  const currentLevelExp = exp - levelStartExp
  const needExpToNext = 100 - currentLevelExp
  const nextLevel = currentLevel + 1

  return (
    <>
      <p className="experience__show--level"> Level {currentLevel}: {LEVEL_TITLES[currentLevel]} </p>
      <small className="experience__show--level--coming">
        <i>你还需要 {needExpToNext} 点经验即可升到{nextLevel}级</i>
      </small>
      <progress
        className="experience__progression-bar__bar"
        value={currentLevelExp}
        max="100"
      ></progress>
    </>
  )
}

效果验证 #

你举例的2级用户有180点经验的场景：

• currentLevel = Math.floor(180/100) +1 = 2
• currentLevelExp = 180 - 100 = 80
• 进度条value=80，max=100，刚好显示80%的完成进度，剩余20点升级，完全符合需求。

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