增加分类标签，效果如下：
1 修改ListData组件
完整代码：
import React , { Component }from 'react';
import { List, Avatar, Icon, Spin ,Tag } from 'antd';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import './my.css';
import {Link} from 'dva/router';class ListData extends Component{changeType(tab) {const { dispatch,pageSize} = this.propsdispatch({ type: 'listdata/query', payload: { page:1,pageSize,type:tab} })}render() {const IconText = ({ type, text }) => (<span><Icon type={type} style={{ marginRight: 8 }} />{text}</span>
);const MyTag= {share:'分享',ask: '问答', job: '招聘',good: '精化', dev: '客户端测试'};const Colors= {share:'#87d068',ask: '#2db7f5', job: 'purple',good: 'orange', dev: 'lime'};return (<Spin spinning={this.props.loading.global}size='large'tip="数据正在加载中"><div><Tag onClick={this.changeType.bind(this,'all')} color={this.props.type==='all' ? "#87d068" : "#2db7f5"}>全部</Tag><Tag onClick={this.changeType.bind(this,'good')} color={this.props.type==='good' ? "#87d068" : "#2db7f5"}>精华</Tag><Tag onClick={this.changeType.bind(this,'share')} color={this.props.type==='share' ? "#87d068" : "#2db7f5"}>分享</Tag><Tag onClick={this.changeType.bind(this,'ask')} color={this.props.type==='ask' ? "#87d068" : "#2db7f5"}>问答</Tag><Tag onClick={this.changeType.bind(this,'job')} color={this.props.type==='job' ? "#87d068" : "#2db7f5"}>招聘</Tag><Tag onClick={this.changeType.bind(this,'dev')} color={this.props.type==='dev' ? "#87d068" : "#2db7f5"}>客户端测试</Tag></div><ListitemLayout="vertical"size="large"pagination={{onChange: (page) => {console.log(page);this.props.dispatch({ type: 'listdata/query', payload: { page:page,pageSize:this.props.pageSize,type:this.props.type} })},pageSize: this.props.pageSize,total:500,current:this.props.page}}dataSource={this.props.pageData}renderItem={item => (<List.Itemkey={item.title}actions={[<IconText type="star-o" text={item.visit_count} />, <IconText type="like-o" text={item.visit_count} />, <IconText type="message" text={item.reply_count} />]}><List.Item.Metaavatar={<Avatar src={item.author.avatar_url} />}title={<a>{item.author.loginname}</a>}description={item.create_at}/>{item.top ? <Tag color='#f50'>置顶</Tag> : <Tag color={Colors[item.tab]}>{MyTag[item.tab]}</Tag>}<Link to={'/detail/'+item.id}>{item.title}</Link></List.Item>)}/></Spin>);}componentWillMount () {const { dispatch, type, pageSize,page} = this.propsdispatch({ type: 'listdata/query', payload: { page,pageSize,type} })}
};ListData.propTypes = {type: PropTypes.string.isRequired,pageSize: PropTypes.number.isRequired,
};function mapStateToProps(state) {const {pageSize,type,page,pageData} = state.listdata;return {pageSize,type,page,pageData,loading:state.loading};
}// export default ListData;
export default connect(mapStateToProps)(ListData);2 在列表头部增加tag组件
<div><Tag onClick={this.changeType.bind(this,'all')} color={this.props.type==='all' ? "#87d068" : "#2db7f5"}>全部</Tag><Tag onClick={this.changeType.bind(this,'good')} color={this.props.type==='good' ? "#87d068" : "#2db7f5"}>精华</Tag><Tag onClick={this.changeType.bind(this,'share')} color={this.props.type==='share' ? "#87d068" : "#2db7f5"}>分享</Tag><Tag onClick={this.changeType.bind(this,'ask')} color={this.props.type==='ask' ? "#87d068" : "#2db7f5"}>问答</Tag><Tag onClick={this.changeType.bind(this,'job')} color={this.props.type==='job' ? "#87d068" : "#2db7f5"}>招聘</Tag><Tag onClick={this.changeType.bind(this,'dev')} color={this.props.type==='dev' ? "#87d068" : "#2db7f5"}>客户端测试</Tag></div>一共6种类型
3 为每一种类型添加鼠标点击事件
changeType(tab) {const { dispatch,pageSize} = this.propsdispatch({ type: 'listdata/query', payload: { page:1,pageSize,type:tab} })}点击后重新获取新的数据，请求参数，页码为1默认获取第一页数据
4 给列表的每一条数据也添加tag
const MyTag= {share:'分享',ask: '问答', job: '招聘',good: '精化', dev: '客户端测试'};const Colors= {share:'#87d068',ask: '#2db7f5', job: 'purple',good: 'orange', dev: 'lime'};
{item.top ? <Tag color='#f50'>置顶</Tag> : <Tag color={Colors[item.tab]}>{MyTag[item.tab]}</Tag>}主要是根据item.tab的来变换颜色以及显示文字
最后效果
这节课内容比较简单，基本上整个网站的主体就完成了，下节课再把剩下几个页面一搞。
欢迎关注我的公众号mike啥都想搞，学习更多内容。
