import { useState } from "react";
import styles from "./docs.less";
const Category = () => {
const categories = ["苹果","西瓜","桃子","哈密瓜","西红柿","茄子","苦柚","豇豆"];
const [category,setCategory] = useState(categories);
const [currentIndex,setCurrentIndex] = useState(0);
const [active,setActive] = useState(styles.active);
const setCurrent = (index:number) => {
setCurrentIndex(index);
}
return (
<ul className="categoryList">
{
category.map((item,index) => {
return <li key={index} className={currentIndex === index ? active : ""} onClick={() => setCurrent(index)}>{item}</li>
})
}
</ul>
);
};
export default Category;
react点击后高亮显示
最新推荐文章于 2024-03-26 10:55:25 发布