一:实现recommed部分代码
1.在Recommed文件中,我们定义两个元素RecommedWrapper和RecommedItem,并且从styled文件中将它们引入
2.在styled文件中,我们去编写刚刚两个标签的样式
export const RecommedWrapper = styled.div`
margin:30px 0;
width:280px;
`;
export const RecommedItem = styled.div`
width:280px;
height:50px;
background:url(${(props)=>props.imgUrl});
background-size:contain;
`;
3.效果图:
4.如何使用数据管理
- 我们以一个列表的形式把数据存放在reducer中,
- 在我们的Recommed中,引入connect进行数据连接:
- 利用mapState获取store的数据
- 在Recommend中使用list中的数据,进行遍历
- 这样就实现了数据的管理