前端项目实战伍-ant design table行实现逐行变色的效果

大家好 我是歌谣 记录工作中遇到的各种问题 微信公众号关注前端小歌谣持续学习前端知识 

今天在工作中遇到一个新的需求 就是实现一个逐行变色的效果 

思路找到每一行 点击判断是该行 

 render部分

 render: (value: any, record: any, index: any) => {
                // 处理列，相同数据则合并
                // 处理rowSpan
                return <div className=
{record.id==styleFlagId?"style-color":""} 
onClick={()=>{handleClick(record.id)}}>{value}</div>
            },

 数据部分 

 const [styleFlagId, setstyleFlagId] = useState<any>("");
    const handleClick=(styleFlagId:any)=>{
        setstyleFlagId(styleFlagId)
    }

 运行结果