2-5 首页推荐部分代码

推荐组件是在 src/pages/home/components 下的 Recommend.js 中，那么，我们先初始化一下这个组件如下。

import React, {Component} from 'react';
import {
  RecommendWrapper,
  RecommendItem
} from '../style.js';

class Recommend extends Component {
    render () {
        return (
          <RecommendWrapper>
            <RecommendItem />
            <RecommendItem />
          </RecommendWrapper>
        )
    }
}

export default Recommend;

然后，在 src/pages/home 下的 style.js 中，定义这两个小组件。

export const RecommendWrapper = styled.div`
    margin: 30px 0;
    width: 280px;
`;

export const RecommendItem = styled.div`
    width: 280px;
    height: 50px;
    background: url(http://m.360buyimg.com/babel/jfs/t1/32844/24/9280/5497/5ca56eccEf17f316e/f6810e3e0fb865ed.png);
    background-size: 190px 40px;
    background-repeat: no-repeat;
`;

好啦。但是这样所有背景都一样啦。于是我们把背景url 拿出来：

Recommend.js

import React, {Component} from 'react';
import {
  RecommendWrapper,
  RecommendItem
} from '../style.js';

class Recommend extends Component {
    render () {
        return (
          <RecommendWrapper>
            <RecommendItem imgURL="http://m.360buyimg.com/babel/jfs/t1/32844/24/9280/5497/5ca56eccEf17f316e/f6810e3e0fb865ed.png" />
            <RecommendItem imgURL="http://m.360buyimg.com/babel/jfs/t1/32844/24/9280/5497/5ca56eccEf17f316e/f6810e3e0fb865ed.png" />
          </RecommendWrapper>
        )
    }
}

export default Recommend;

修改 style.js 中内容如下。

export const RecommendWrapper = styled.div`
    margin: 30px 0;
    width: 280px;
`;

export const RecommendItem = styled.div`
    width: 280px;
    height: 50px;
    background: url( ${ (props) => props.imgURL } );
    background-size: 190px 40px;
    background-repeat: no-repeat;
`;

下一步，我们将imgURL 放在redux 中。打开src/pages/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'
    }],
    recommendList: [{
        id: 1,
        imgURL: "http://m.360buyimg.com/babel/jfs/t1/32844/24/9280/5497/5ca56eccEf17f316e/f6810e3e0fb865ed.png"
    }, {
        id: 2,
        imgURL: "http://m.360buyimg.com/babel/jfs/t1/32844/24/9280/5497/5ca56eccEf17f316e/f6810e3e0fb865ed.png"
    }]
});

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

接着，我们再来改一下Recommend.js 让它使用redux 中的recommendList 如下。

import React, {Component} from 'react';
import { connect } from 'react-redux';
import {
  RecommendWrapper,
  RecommendItem
} from '../style.js';

class Recommend extends Component {
    render () {
        const { recommendList } = this.props;
        return (
          <RecommendWrapper>
            {
              recommendList.map( (item) => {
                return (
                  <RecommendItem key={item.get("id")} imgURL={item.get("imgURL")} />
                )
              })
            }
          </RecommendWrapper>
        )
    }
}

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

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

2-5 首页推荐部分代码

猜你喜欢