react tabs切换
组件
代码如下(示例):
import { Avatar } from 'antd';
import React, { useState } from 'react';
interface ListProps {
data: any[];
}
const ContactsList: React.FC<ListProps> = (props) => {
const { data } = props;
const [checked, setchecked] = useState <Number | undefined>(Number);
function check(index) {
console.log('选择', index);
return index === checked ? 'friendsList_item friendsList_item_active' : 'friendsList_item';
}
return (
<div>
{data.map((element, index) => {
return (
<div onClick={() => { setchecked(index); }} className={check(index)}>
<Avatar size={50} src={element.headImgUrl} />
<text>{element.name}</text>
{element.nickname === null ? (<text>{element.nickname}</text>) : element.nickname}
</div>
);
})}
</div>
);
};
export default ContactsList;
样式页面
代码如下(示例):
// 好友列表样式
.friendsList_item{
font-weight: bold;
}
.friendsList_item_active{
color: #FFF;
height: 56px;
background: #6C5DD3;
border-radius: 12px;
}
使用页面
代码如下(示例):
import React from 'react';
import ContactsList from '@/components/ContactsList/index';
const data= [
{
id: 1,
name: '张三',
nickname: '小张',
headImgUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
id: 2,
name: '李四',
nickname: '小里斯',
headImgUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
];
export default function FriendsList() {
return (
<div>
<ContactsList data={data} />
</div>
);
}