React中map函数内多条件判断问题：进度条多值配色实现

嘿，我懂你想实现的这个按数值分颜色层级的进度条需求～之前在map里用if/else没生效，大概率是写法或者条件判断的细节出了问题。这里给你几个更优雅的实现方案，尤其是对象映射的方式，比嵌套的if/else清爽太多，后续维护也方便！

把数值和对应的颜色类名/样式提前映射成一个对象，直接通过数值取值，代码干净还容易扩展，以后要加新的数值层级也只需要在映射里加一行就行。

先定义映射关系（你可以根据实际需求修改类名或颜色值）：

// 假设4种数值对应的进度条颜色类是这四个
const progressColorMap = {
  1: 'progress-bar--danger',
  2: 'progress-bar--warning',
  3: 'progress-bar--info',
  4: 'progress-bar--success'
};

然后在map循环里直接使用：

<ul className="venue-list">
  {searchVenues.map(item => {
    // 替换成你实际存储进度数值的字段
    const progressValue = item.venue.progress;
    // 从映射里取对应的类名，加个默认值防止意外数值
    const progressClass = progressColorMap[progressValue] || 'progress-bar--default';

    return (
      <li className="venue-list__item" key={item.venue.id}>
        <Link to={`/venues/${item.venue.id}`} className="venue-list__itemLink">
          <div className="venue-list__cover" />
          <img src={`${item.venue.imageUrl}`} alt={item.venue.name} />
          {/* 进度条部分 */}
          <div 
            className={`progress-bar ${progressClass}`}
            style={{ width: `${progressValue * 25}%` }} // 假设4级对应100%，按比例计算宽度
          >
            {/* 这里可以加进度数值文本 */}
          </div>
        </Link>
      </li>
    )
  })}
</ul>

如果不想用对象映射，也可以把if/else逻辑抽出来写在map函数内部，避免直接嵌套在JSX里导致代码混乱：

<ul className="venue-list">
  {searchVenues.map(item => {
    const progressValue = item.venue.progress;
    let progressClass = '';

    // 这里要注意数值类型匹配，比如如果progressValue是字符串，就要用'1'而不是1
    if (progressValue === 1) {
      progressClass = 'progress-bar--danger';
    } else if (progressValue === 2) {
      progressClass = 'progress-bar--warning';
    } else if (progressValue === 3) {
      progressClass = 'progress-bar--info';
    } else if (progressValue === 4) {
      progressClass = 'progress-bar--success';
    } else {
      progressClass = 'progress-bar--default';
    }

    return (
      <li className="venue-list__item" key={item.venue.id}>
        <Link to={`/venues/${item.venue.id}`} className="venue-list__itemLink">
          <div className="venue-list__cover" />
          <img src={`${item.venue.imageUrl}`} alt={item.venue.name} />
          <div className={`progress-bar ${progressClass}`} style={{ width: `${progressValue * 25}%` }}></div>
        </Link>
      </li>
    )
  })}
</ul>

如果不想额外写CSS类，也可以直接用内联样式设置背景色，同样用映射来管理：

const progressColorMap = {
  1: '#ff4444',
  2: '#ffbb33',
  3: '#33b5e5',
  4: '#00C851'
};

然后在JSX里：

<div 
  className="progress-bar"
  style={{ 
    width: `${progressValue * 25}%`,
    backgroundColor: progressColorMap[progressValue] || '#cccccc'
  }}
></div>

补充：之前if/else没生效的可能原因 #

• 没有把判断逻辑放在map的函数体内，直接写在了JSX的返回语句里，忘记用{}包裹
• 数值类型不匹配：比如后台返回的是字符串类型的"1"，但你用=== 1（数字）判断，导致条件不成立
• 条件判断的字段写错了，比如取错了item里的进度数值字段

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