React技能进度条问题：无法显示各技能不同百分比数值

嘿，我完全懂你遇到的困扰——所有技能进度条都齐刷刷显示同一个数值，没法各自对应HTML50%、CSS78%这类专属百分比对吧？这大概率是因为你的代码里用了全局变量或者统一的选择逻辑，没给每个进度条绑定独立的目标值。我来给你几个实用的解决办法：

这种方法能让你直接在每个进度条元素上定义专属目标百分比，再用JavaScript遍历读取并应用，维护起来超方便。

第一步：编写HTML结构 #

给每个进度条加data-target属性，把对应的百分比写进去：

<div class="skill-item">
  <p>HTML</p>
  <div class="progress-bar" data-target="50"></div>
</div>
<div class="skill-item">
  <p>CSS</p>
  <div class="progress-bar" data-target="78"></div>
</div>
<div class="skill-item">
  <p>JavaScript</p>
  <div class="progress-bar" data-target="62"></div>
</div>

第二步：基础CSS样式（可按需调整） #

先给进度条做个基础样式，加个过渡动画会更丝滑：

.skill-item {
  margin: 1rem 0;
}
.progress-bar {
  width: 0;
  height: 1.2rem;
  background-color: #2563eb;
  border-radius: 0.6rem;
  transition: width 1.2s ease-in-out;
  /* 可选：显示百分比文本 */
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  color: white;
  font-size: 0.9rem;
}

第三步：JavaScript逻辑处理 #

遍历所有进度条，读取每个的data-target值并设置宽度：

// 获取所有进度条元素
const progressBars = document.querySelectorAll('.progress-bar');

progressBars.forEach(bar => {
  // 读取当前进度条的目标百分比
  const targetPercent = bar.getAttribute('data-target');
  // 设置进度条宽度为目标百分比
  bar.style.width = `${targetPercent}%`;
  // 可选：把百分比文本显示在进度条里
  bar.textContent = `${targetPercent}%`;
});

如果你的技能列表很少且不需要动态修改，也可以给每个进度条加独特类名，直接用CSS设置宽度：

HTML结构 #

<div class="skill-item">
  <p>HTML</p>
  <div class="progress-bar html-progress"></div>
</div>
<div class="skill-item">
  <p>CSS</p>
  <div class="progress-bar css-progress"></div>
</div>

CSS样式 #

.progress-bar {
  /* 基础样式同上 */
}
.html-progress {
  width: 50%;
}
.css-progress {
  width: 78%;
}

这种方法简单直接，但技能多了之后CSS会变得臃肿，扩展性不如数据属性方案。

如果你的技能列表很长，或者需要从后端获取数据，可以用JS数组存储技能信息，动态生成整个技能模块：

JavaScript代码 #

// 技能数据数组，后续改数据就行
const skillsData = [
  { name: 'HTML', percent: 50 },
  { name: 'CSS', percent: 78 },
  { name: 'JavaScript', percent: 62 },
  { name: 'React', percent: 45 }
];

// 获取存放技能的容器
const skillsContainer = document.getElementById('skills-container');

// 遍历数据生成DOM元素
skillsData.forEach(skill => {
  const skillDiv = document.createElement('div');
  skillDiv.className = 'skill-item';

  const skillName = document.createElement('p');
  skillName.textContent = skill.name;

  const progressBar = document.createElement('div');
  progressBar.className = 'progress-bar';
  progressBar.style.width = `${skill.percent}%`;
  progressBar.textContent = `${skill.percent}%`;

  skillDiv.appendChild(skillName);
  skillDiv.appendChild(progressBar);
  skillsContainer.appendChild(skillDiv);
});

只需要一个HTML容器 #

<div id="skills-container"></div>

这样你只需要修改skillsData数组，就能更新所有技能的进度，非常适合需要频繁维护的场景。

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