dva开发一个cnode网站（4）

共计 3751 个字符，预计需要花费 10 分钟才能阅读完成。

增加分类标签，效果如下：

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.props
dispatch({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>
<List
itemLayout=”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.Item
key={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.Meta
avatar={<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.props
dispatch({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.props
dispatch({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 啥都想搞，学习更多内容。