2-4 首页文章列表制作

这个组件的话，与2-3 专题组件很相似。它是 home 下的 List.js 组件.

首先，我们来写一下 List.js 这个文件，如下。

import React, {Component} from 'react';
import { ListItem, ListInfo } from '../style';

class List extends Component {
    render () {
        return (
            <div>
                <ListItem>
                    <img
                        className='pic'
                        src='//upload-images.jianshu.io/upload_images/13910150-3c33a8d64aa623bc.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
                    />
                    <ListInfo>
                        <h3 className='title'>这是标题</h3>
                        <p className='desc'>这个段落的概要的内容。。。</p>
                    </ListInfo>
                </ListItem>
            </div>
        )
    }
}

export default List;

然后，同样，往 src/pages/home 下的style.js 中添加如下内容。

export const ListItem = styled.div`
    padding: 20px 0;
    border-bottom: 1px solid #dcdcdc;
    overflow: hidden;
    .pic {
        width: 125px;
        height: 100px;
        display: block;
        float: right;
        border-radius: 10px;
    }
`;

export const ListInfo = styled.div`
    width: 500px;
    float: left;
    .title {
        line-height: 27px;
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }
    .desc {
        line-height: 24px;
        font-size: 13px;
        color: #999;
    }
`;

好了。然后，可以去写home/store/reducer 中的内容了。如下。

import { fromJS } from 'immutable';

const defaultState = fromJS({
    topicList: [{
        id: 1,
        title: '热点--',
        imgURL: '//upload.jianshu.io/users/upload_avatars/4802366/4f86b75d-b61b-4126-8be4-87a151c9cd28.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp'
    }, {
        id: 2,
        title: '桃花--',
        imgURL: '//upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp'
    }],
    articleList: [{
        id: 1,
        title: '这是标题',
        desc: '这个段落的概要的内容。。。',
        imgURL: '//upload-images.jianshu.io/upload_images/13910150-3c33a8d64aa623bc.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    },{
        id: 2,
        title: '这是标题2',
        desc: '这个段落的概要的内容2。。。',
        imgURL: '//upload-images.jianshu.io/upload_images/13910150-3c33a8d64aa623bc.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240'
    }]
});

export default (state = defaultState, action) => {
    switch (action.type) {
        default:
            return state;
    }
}

然后，修改一下 List.js 如下

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { ListItem, ListInfo } from '../style';

class List extends Component {
    render () {
        const { articleList } = this.props;
        return (
            <div>
                { 
                    articleList.map( (item) => {
                        return (
                            <ListItem key={item.get('id')}>
                                <img
                                    className='pic'
                                    src={item.get('imgURL')}
                                />
                                <ListInfo>
                                    <h3 className='title'>{item.get('title')}</h3>
                                    <p className='desc'>{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        )
                    } )
                }
                
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        articleList: state.get("home").get("articleList")
    }
}

export default connect(mapStateToProps, null)(List);

Done.