17.首页部分组件的拆分

1.我们在src目录下新建一个文件夹:pages,在pages中新建两个文件夹:Home和Detail
然后分别在其内部新建两个index.js文件
在这里插入图片描述
2.在Home的index中:
在这里插入图片描述3.在Detail的index中:
在这里插入图片描述4.然后我们在APP中,将home和detail引入
在这里插入图片描述5.将Home和Detail作为组件传入路由
在这里插入图片描述这样Home和Detail两个部分就实现了拆分,并且不同目录下显示的内容也是不一样

6.然后我们对home中的内容再进行拆分:在home目录下新建一个文件夹commponents,然后在commponents中新进三个文件
在这里插入图片描述
在这3个文件中引入react并导出

import React, { Component } from 'react';
class 组件名 extends Component{
    render() {
        return(
        <div>组件名</div>)
    }
}
export default 组件名;

7.我们需要在home的index中引入这个3个小的组件

在这里插入图片描述8.我们把home这个页面划分为两个大的部分,左和右,左边包含list组件,右边包含recommed和write两个组件
在这里插入图片描述9.下面来实现List这一块的内容:List.js中的代码

import React, { Component } from 'react';
import { ListItem, ListInfo } from '../style';
class List extends Component{
    render() {
        return (
            <div>
                <hr/>
               <ListItem>
                    <img className=" List-pic" src={require('../img/2.jpg')}/>
                <ListInfo>
                    <h3 className='title'>男人离不开的,往往是“不好惹”的女人</h3>
                    <p className='desc'>幸福,大概就是,你想要靠近的那个人,永远都不会推开你。不管他忙与不忙,只要你一回头,就能看见他的样子。 受委屈的时候,他会各种讨好你,遇到麻烦事... </p>
                </ListInfo>
                </ListItem>
               
            </div>
        )
    }
}
export default List;

10.styled.js中的关于list代码:

export const ListItem = styled.div`
overflow:hidden;
  padding:20px 0;
  border-bottom:1px solid #dcdcdc;
   .List-pic{
    display:block;
    width:125px;
    height:100px;
    float:right;
    border-radius:10px;
  }
 
`;
export const ListInfo = styled.div`
  width:500px;
  float:right;
  .title{
    line-height:27px;
    font-size:18px;
    font-weight:bold;
    color:#333;

  }
  .desc{
    line-height:18px;
    font-size:13px;
    color:#999;

  }
`

效果图:
在这里插入图片描述11.因为list列表有很多项,我们使用store来管理数据
在这里插入图片描述
12.store中的reducer.js:

import { fromJS } from 'immutable';
const defaultState = fromJS({
    articleList: [{
        id: 1,
        title: '男人离不开的,往往是“不好惹”的女人',
        desc: '幸福,大概就是,你想要靠近的那个人,永远都不会推开你。不管他忙与不忙,只要你一回头,就能看见他的样子。 受委屈的时候,他会各种讨好你,遇到麻烦事... ',
        img: { require("../img/2.jpg") },
    },
    {
        id: 2,
        title: '男人离不开的,往往是“不好惹”的女人',
        desc: '幸福,大概就是,你想要靠近的那个人,永远都不会推开你。不管他忙与不忙,只要你一回头,就能看见他的样子。 受委屈的时候,他会各种讨好你,遇到麻烦事... ',
         img: { require("../img/2.jpg") },
    },
    ]
})
export default (state = defaultState, action) => {
    
}

13.我们的思想是将整个项目的redcuer拆分为很多个小的不同部分的,在src目录下的store的reducer中,我们将这一块的reducer放入:
在这里插入图片描述
14.List.js中,我们引入组件
在这里插入图片描述在这里插入图片描述15.在list中我们将拿到的数据来渲染页面效果:
在这里插入图片描述16.然后在利用map遍历,把reducer数据渲染到页面

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

class List extends Component{
    render() {
        //这里的list就是我们拿到的articleList中的list
        const { list } = this.props;
        return (
            <div>
                <hr />
                {
                    list.map((item) => {
                        return (
                     <div> 
                        <ListItem key={item.get('id')}>
                            <img className=" List-pic" src={item.get('img')}/>
                            <ListInfo>
                                <h3 className='title'>{item.get('title')}</h3>
                                <p className='desc'>{item.get('desc')}</p>
                            </ListInfo>
                         </ListItem>
                     </div>
                        )
                    
                })}
            </div>
        )
    }
}
//mapState是从store拿数据到list中
const mapState = (state) => ({
    list:state.getIn(['home','articleList'])
})
export default connect(mapState)(List);

在这里插入图片描述现在这个背景透明,我们需要在header目录下的styled中:
在这里插入图片描述在这里插入图片描述

版权声明:本文为zhuhui2000原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhuhui2000/article/details/91350250