自定义组件ProducCollection

老师，我有一下几个问题不理解：

图一中，同样是用的假数据，自定义组件 ProductCollection，为什么后面还要自定义那么多属性，不可以直接<ProducCollection />这样子用么？
图二是这个组件的细节，同样是假数据，为什么SideMenu参数为空，直接从mockup中import后，在函数体中就可以用。而我们的ProducCollection 组件还要传Props？
Props一般是父传子组件，可是<ProducCollection />的父子组件我不知道，不清楚Props来自于谁？传给谁？

抱歉，老师，问题有点多，主要是这一块儿的逻辑我没有弄懂。麻烦老师帮我梳理一下可以么？谢谢！

qq_宝慕林8034856 2022-03-28

源自：项目：React旅游网 1-7 【主页开发】热门产品推荐

收起

1回答

卡布琦诺 2022-03-28 16:20:12

同学你好，首先app.tsx相当于是父组件。然后因为“爆款推荐”、“新品上市”、“新品上市”这三个模块页面的布局相同，所以需要使用组件分别为三个模块定义不同的标题。还需要给这三个模块分别渲染数据。因此不能直接写成<ProducCollection />。其次，在SideMenu中，不需要子组件传值，直接自己就将数据遍历渲染完了。而ProductCollection的数据中包含了三组数据，每组数据都需要分别渲染。这也就是你在app.tsx能看到引用了三次ProductCollection组件，正式因为需要引用三次这个组件，每个组件都需要单独渲染数据，因此就有了组件和子组件的这种形式，所以需要使用Props传值。图示如下：

祝学习愉快！

收起回答

weixin_慕姐4338681 #1

老师，“爆款推荐”、“新品上市”、“新品上市”这三个模块为啥要分开写，把这三者合并到一个模块里面写，不是更加简洁吗

2022-09-02 17:43:15
weixin_慕姐4338681 #2

“爆款推荐”、“新品上市”、“新品上市”这三个模块为啥要分开写，合并成一个模块再导出不是更方便吗

2022-09-02 17:44:50
好帮手慕久久回复 weixin_慕姐4338681 #3

解答如下：
1、可以将三者合到一个页面中书写，不是必须拆分的。
2、合到一起写，会造成一个页面中代码特别多，不利于后期维护修改。假设合到一起写后，代码总共1万行。如果你想修改“爆款推荐”的内容，就需要在这一万行代码中查找你的目的代码，相对难一些。
如果分着写，你可以直接通过文件名锁定“爆款推荐”的代码，更简单些。

2022-09-02 18:22:21