dva开发一个cnode网站（4）

增加分类标签，效果如下：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啥都想搞，学习更多内容。