第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

【學習打卡】第6天 實戰(zhàn)旅游項目/Vue改寫

標簽:
Html5

学习打卡】第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灵活的优势处
图片描述

點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消