【学习打卡】第6天 实战旅游项目/Vue改写

课程名称：[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节： 主页开发

主讲老师：阿莱克斯

课程内容：

1. 【主页开发】热门产品推荐
2. 学习组件化思想

课程收获：

为产品列表定义类型 JSX.Element 是TS用来表示JSX的类型

interface PropsType {
  title: JSX.Element
  sideImage: string,
  products: any
}

将传入的参数解构并带上类型

ProductCollection: React.FC<PropsType> = ({title, sideImage, products})

分割布局 左侧4 右侧20

    <Row>
      <Col span={4}>
        <img src={sideImage} className={styles['side-image']} alt=""/>
      </Col>
      <Col span={20}>
      </Col>
    </Row>

由于产品列表都表现形式都差不多 所以抽离出一个新的组件

              <ProductImage
                size={"mini"}
                title={products[0].title}
                imageSrc={products[0].touristRoutePictures.url}
                price={products[0].price}
              />

<>
  {/*可以通过三元表达式判断需要渲染的组件 用()包裹*/}
  {size === "mini" ? (
    <Image src={imageSrc} height={285} width={490}></Image>
  ) : (
    <Image src={imageSrc} height={120} width={240}></Image>
  )}
</>

合理运用Row Col 分割布局 这里本来想采用json循环 暂时没有更好的实现方式

      <Row>
        <Col span={4}>
          <img src={sideImage} className={styles["side-image"]} alt="" />
        </Col>
        <Col span={20}>
          <Row>
			<Col>....</Col>	
          </Row>
        </Col>
      </Row>

在这小节中 重要学习了在react中如何合理的分割组件进行使用，相比vue来说, jsx的语法非常灵活，在vue的实现方式和react不一致，我会在明天对该部分进行vue的重写，仔细感觉jsx灵活的优势处