介绍

在 React 框架里，通过循环去显示 tab列表的标题，并且添加点击事件，当前点击的tab高亮显示。就像 vue 里 通过 v-for 显示列表并且点击时添加 activeClass 一样。

实现效果

代码

主要通过 map方法来实现列表的循环显示，然后添加点击事件，通过对应id的判断来添加 activeClass

// 逻辑部分
// 使用useState维护tab列表
import { useState } from "react";
// 定义列表数据
const tabList = [
  {type: 'new',tab:'最新'},
  {type: 'hot',tab:'最热'},
]
// 设置初始type
const [currentType,setCurrentType] = useState('new');
// 切换type，添加active样式
const checkType = (text) => {
   setCurrentType(text);
}
// 页面部分
<div className="sort-box">
 {tabList.map(item =>
   <span key={item.type}
     className={`type-tab ${ currentType == item.type && 'activeType'}`}
     onClick={() => checkType(item.type)}
   >{item.tab}</span>
 )}
</div>
// 样式部分
.sort-box .type-tab.activeType {
  color: #ff7f41;
}

总结

1. React 框架的循环列表是通过 map 方法实现的，且必须要添加 key；
2. React 的类名是通过 className来添加的