React使用map渲染排名列表时如何仅给前3项条件展示图片

实现方案 #

你可以直接利用map方法回调自带的索引参数判断是否为前3项，不需要额外声明外部计数变量，修改后的代码如下：

{album?.map((d, index) => (
  <Link 
    className="link" 
    to={{ pathname: "/itemPage/" + d.id, album: d }}
    key={d.id} // 建议加上key避免React渲染警告
  >
    {d.isSingle ? (
      <ul className="listNumber"> 
        <span className="info">
          {/* 索引小于3（对应排序前3项）时渲染图片 */}
          {index < 3 && <img src={d.imgSmall} alt={`${d.artist} - ${d.title}`} style={{width: '40px', height: '40px', verticalAlign: 'middle', marginRight: '8px'}} />}
          {index + 1}. {d.artist} - {d.title}
          <b className="rating">{getRating(d)}</b>
        </span>  
      </ul>
    ) : null}
  </Link>
))}

代码说明 #

• 这里直接用map回调的第二个参数index获取当前元素的排序位置，索引从0开始计数，所以判断index < 3就对应前3条数据
• 用可选链操作符?.代替你原来的album && album.map写法，逻辑等价且更简洁
• 补充了React列表渲染必须的key属性，避免控制台报重复渲染警告
• 给图片加了基础对齐样式和alt属性，你可以根据自己的设计需求调整样式参数

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