动态渲染数组时需要给前三行特定的样式实现

问题描述：

通过后台返回的数据渲染一个排名表格，前三名需要特定的图片标志和字体样式。（特殊情况：返回的数据可能少于三个）
类似一下效果：

---

解决办法：

单独给前三行数据添加字体样式和图片

//定义图片和类数组
const imgList = ['one', 'two', 'three']
const classNameData = ['one', 'two', 'three']

//给返回的对象数组前三个添加特定的属性
if (data) {
  let dataLen = data.length > 3 ? 3 : data.length
  data= data.slice(0, dataLen );
  for (let i = 0; i < dataLen ; i++) {
  //分别给前三条数据添加属性名为className和img，值为上述数组对应索引的值
     data[i]['className'] = classNameData[i]
     data[i]['img'] = imgList[i]
   }
}

然后再渲染表格的地方给前三行赋予对应的类和图片,以下写个简单的例子

<tbody>
 {
  	data.map((item, index) => {
  		return (
  		//直接把前三个添加的属性的值作为类，写对应的样式即可
      		<tr className={item.className} key={index}>
      			<td className='tds'><span className={item.img}></span></td>
      			<td>{item.number}</td>
      			<td>{item.name}</td>
        		<td>{item.total}</td>
       			<td>{item.grade}</td>
     		</tr>
   		)
   })
 }
</tbody>

---