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中: