轮播组件开发，mock數據 key有錯

[FPNL]

https://sanyuan0704.github.io/react-cloud-music/chapter3/slider.html

import React from 'react';
import Slider from '../../components/slider';

function Recommend() {

  // mock数据 
  const bannerList = [1,2,3,4].map(item => {
    return { src: "http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" }
  });

  return (
    <div>
      <Slider bannerList={bannerList}></Slider>
    </div>
  )
}

export default React.memo(Recommend);

src 應該改成 imageUrl

[FPNL]

另外， https://sanyuan0704.github.io/react-cloud-music/chapter3/list.html

import React from 'react';
import Slider from '../../components/slider';
import RecommendList from '../../components/list';

function Recommend() {

  // mock数据
  const bannerList = [1,2,3,4].map(item => {
    return { imageUrl: "http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" }
  });

  const recommendList = [1,2,3,4,5,6,7,8,9,10].map(item => {
    return {
      picUrl: "https://p1.music.126.net/fhmefjUfMD-8qtj3JKeHbA==/18999560928537533.jpg",
      playCount: 17171122,
      name: "朴树、许巍、李健、郑钧、老狼、赵雷"
    }
  });

  return (
    <div>
      <Slider bannerList={bannerList}></Slider>
      Recommend
    </div>
  )
}

export default React.memo(Recommend);

第23行 Recommend 應該是 <RecommendList recommendList={recommendList}></RecommendList>

[FPNL]

加油～挺喜歡這計畫的，對於正在學習 ｒｅａｃｔ的我幫助很大 謝謝

[sanyuan0704]

谢谢你的反馈，已经全部更正。能够帮到你我也感到很开心

[alleluya-young]

谢谢你的反馈，已经全部更正。能够帮到你我也感到很开心

三元大佬好 这个地方 我按照分支上slider的stylejs写before的样式, top: -300px;height: 400px; 整个页面都被before这个div遮住了 请问下是哪里的问题?我改成top:0;height:100px就可以了...

[sanyuan0704]

谢谢你的反馈，已经全部更正。能够帮到你我也感到很开心

三元大佬好 这个地方 我按照分支上slider的stylejs写before的样式, top: -300px;height: 400px; 整个页面都被before这个div遮住了 请问下是哪里的问题?我改成top:0;height:100px就可以了...

在父元素增加overflow: hidden试试

[alleluya-young]

在父元素增加overflow: hidden试试

可以了 完全没想起来用这个属性 只想着怎么改before的样式了...

[swsoyee]

大佬好，我有一个问题恳请回答。

在大佬第三章的推荐列表开发的最后一段关于decorate的解释说明中，为何把高度设置成了height: 35px;？这么做是有什么意图么？

做到这里预览页面的时候推荐的图片都被压缩变形了，而调整回height: 100%;则可正常显示了。所以想知道大佬是为什么在这里设置成了35px。

谢谢大佬的教程啦！

[sanyuan0704]

最后我只是说明一下，其实代码里面已经这些写了。decorate是绝对定位的啊，是img_wrapper下单独的一个元素，和img标签没有关系，可能是你动错了元素。

[swsoyee]

@sanyuan0704 谢谢大佬回复，我检查了一下自己的 <div className="decorate"></div> 和大佬写的，发现是自己框错地方了