React里循环tab列表，并实现点击切换class
介绍
在 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;
}
总结
React框架的循环列表是通过map方法实现的，且必须要添加key；React的类名是通过className来添加的