代碼見https://gitee.com/XiaoKunErGe/JianShu.git歷史版本第16次提交。

屏幕快照 2019-06-21 15.14.38.png

     <ListItem>
          <img className='pic' src="https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60"/>
          <ListInfo>
            <h3 className='title'>Deepin體驗半年感受</h3>
            <p className='desc'>提及Linux，很多人第一感覺是軟件太少，不能作為生產(chǎn)系統(tǒng)使用。的確這是Linux的主要特點之一。很多人都只是嘗嘗鮮，安裝雙系統(tǒng)也僅僅是流于體驗一下安裝的過程，實際使用少之又少。</p>
          </ListInfo>
        </ListItem>
        <ListItem>
          <img className='pic' src="https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60"/>
          <ListInfo>
            <h3 className='title'>Deepin體驗半年感受</h3>
            <p className='desc'>提及Linux，很多人第一感覺是軟件太少，不能作為生產(chǎn)系統(tǒng)使用。的確這是Linux的主要特點之一。很多人都只是嘗嘗鮮，安裝雙系統(tǒng)也僅僅是流于體驗一下安裝的過程，實際使用少之又少。</p>
          </ListInfo>
     </ListItem>

style.js

export const ListItem = styled.div`
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 1px solid #dcdcdc;
  .pic{
    display: block;
    width: 125px;
    height: 100px;
    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;
  }
`;

二.使用reducer處理數(shù)據(jù),將固有數(shù)據(jù)添加入defaultState里面

articleList:[{
    id:1,
    title:'Deepin體驗半年感受',
    desc:'提及Linux，很多人第一感覺是軟件太少，不能作為生產(chǎn)系統(tǒng)使用。的確這是Linux的主要特點之一。很多人都只是嘗嘗鮮，安裝雙系統(tǒng)也僅僅是流于體驗一下安裝的過程，實際使用少之又少。',
    imgUrl:'https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60',
  },{
    id:2,
    title:'Deepin體驗半年感受',
    desc:'提及Linux，很多人第一感覺是軟件太少，不能作為生產(chǎn)系統(tǒng)使用。的確這是Linux的主要特點之一。很多人都只是嘗嘗鮮，安裝雙系統(tǒng)也僅僅是流于體驗一下安裝的過程，實際使用少之又少。',
    imgUrl:'https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60',
  },{
    id:3,
    title:'Deepin體驗半年感受',
    desc:'提及Linux，很多人第一感覺是軟件太少，不能作為生產(chǎn)系統(tǒng)使用。的確這是Linux的主要特點之一。很多人都只是嘗嘗鮮，安裝雙系統(tǒng)也僅僅是流于體驗一下安裝的過程，實際使用少之又少。',
    imgUrl:'https://oimageb2.ydstatic.com/image?id=6730783280712305022&product=adpublish&w=300&h=200&sc=0&rm=2&gsb=0&gsbd=60',
  }]

到List中通過react-redux的connect獲取數(shù)據(jù)。
List.js

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

class List extends Component {
  render(){
    const { list } = this.props;
    return(
      <div>
        {
          list.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)=>({
  list: state.getIn(['home','articleList'])
});
export default connect(mapStateToProps)(List);

OK，之前的換一批沒有背景色去添加一下到style中的SearchInfo里添加background: #fff;
這時還有一些image報黃，即使用img標(biāo)簽都要加alt標(biāo)簽，所以要在所有img標(biāo)簽中都加入alt

<img className='pic'
                     src={item.get('imgUrl')}
                     alt=''
                />

右邊推薦和作者推薦部分雷同，不加復(fù)述，學(xué)習(xí)CSS時在詳細介紹。