React组件开发：根据props值渲染对应数量的高亮分段进度条

你完全可以用.map()来实现，核心思路是先创建一个长度为5的数组，遍历这个数组生成每个进度分段，再根据传入的value判断哪些分段需要高亮。

完整实现代码 #

首先是Progress.js组件：

import "./Progress.css";

export default function Progress({ value }) {
  // 生成包含5个元素的数组，用来遍历生成分段
  const segments = Array(5).fill(null);

  return (
    <div className="progress-bar">
      {segments.map((_, index) => (
        // 索引从0开始，判断index < value就能高亮前value个分段
        <div
          key={index}
          className={`progress-segment ${index < value ? "highlighted" : "empty"}`}
        />
      ))}
    </div>
  );
}

对应的Progress.css样式：

.progress-bar {
  display: flex;
  gap: 4px;
  height: 20px;
  width: fit-content;
}

.progress-segment {
  width: 40px;
  border-radius: 2px;
}

.progress-segment.highlighted {
  background-color: #4caf50; /* 绿色高亮 */
}

.progress-segment.empty {
  background-color: #e0e0e0; /* 灰色默认 */
}

使用示例 #

在App.js里直接传入1-5的数值即可：

import Progress from "./Progress";

function App() {
  return (
    <div className="App">
      <Progress value={3} />
    </div>
  );
}

export default App;

关键逻辑说明 #

1. 生成数组：Array(5).fill(null)会创建一个长度为5的数组，足够用来遍历5次生成分段。
2. 高亮判断：数组索引从0开始，当index < value时，该分段属于需要高亮的前value个，添加highlighted类，否则添加empty类。
3. key属性：React遍历列表需要唯一key，这里用索引就足够，因为分段数量固定不会变化。

这样传入3时就会有3个绿色分段，剩下2个保持灰色，完全符合你的需求。

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