# 隨堂測驗 請根據下面題目來完成測驗 ## 題目 1. 請將產品利用元件的方式拆出來，並且將資料傳入呈現在畫面上。 2. 請將頁籤區塊拆成元件，並且呈現在畫面上 ( 功能不需要做 )。 請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/mdNaWoK?editors=1011)，並且完成以下條件： ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： function ProductCard({ product }) { return ( <div className="col-md-4 mb-3"> <div className="card"> <img src={product.imageUrl} className="card-img-top primary-image" alt="主圖" /> <div className="card-body"> <h5 className="card-title"> {product.title} <span className="badge bg-primary ms-2">{product.category}</span> </h5> <p className="card-text">商品描述：{product.description}</p> <p className="card-text">商品內容：{product.content}</p> <div className="d-flex"> <p className="card-text text-secondary"> <del>{product.origin_price}</del> </p> &nbsp;元 / {product.price} 元 </div> </div> </div> </div> ); } function Pagination(){ return ( <nav aria-label="Page navigation example"> <ul className="pagination"> <li className="page-item"><a className="page-link" href="#">Previous</a></li> <li className="page-item"><a className="page-link" href="#">1</a></li> <li className="page-item"><a className="page-link" href="#">2</a></li> <li className="page-item"><a className="page-link" href="#">3</a></li> <li className="page-item"><a className="page-link" href="#">Next</a></li> </ul> </nav> ) } function Example() { const [products, setProducts] = React.useState([ { category: "甜甜圈", content: "尺寸：14x14cm", description: "濃郁的草莓風味，中心填入滑順不膩口的卡士達內餡，帶來滿滿幸福感！", id: "-L9tH8jxVb2Ka_DYPwng", is_enabled: 1, origin_price: 150, price: 99, title: "草莓莓果夾心圈", unit: "元", num: 10, imageUrl: "https://images.unsplash.com/photo-1583182332473-b31ba08929c8", }, { category: "蛋糕", content: "尺寸：6寸", description: "蜜蜂蜜蛋糕，夾層夾上酸酸甜甜的檸檬餡，清爽可口的滋味讓人口水直流！", id: "-McJ-VvcwfN1_Ye_NtVA", is_enabled: 16, origin_price: 1000, price: 900, title: "蜂蜜檸檬蛋糕", unit: "個", num: 1, imageUrl: "https://images.unsplash.com/photo-1627834377411-8da5f4f09de8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1001&q=80", imagesUrl: [ "https://images.unsplash.com/photo-1618888007540-2bdead974bbb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80", ], }, { category: "蛋糕", content: "尺寸：6寸", description: "法式煎薄餅加上濃郁可可醬，呈現經典的美味及口感。", id: "-McJ-VyqaFlLzUMmpPpm", is_enabled: 1, origin_price: 700, price: 600, title: "暗黑千層", unit: "個", num: 15, imageUrl: "https://images.unsplash.com/photo-1505253149613-112d21d9f6a9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDZ8fGNha2V8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60", imagesUrl: [ "https://images.unsplash.com/flagged/photo-1557234985-425e10c9d7f1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA5fHxjYWtlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60", "https://images.unsplash.com/photo-1540337706094-da10342c93d8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDR8fGNha2V8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60" ] } ]); return ( <div className="container"> <div className="row"> {products.map((product) => ( <ProductCard key={product.id} product={product} /> ))} <Pagination /> </div> </div> ); } ReactDOM.createRoot(document.getElementById("root")).render(<Example />); --> 回報區 --- | # | Discord | CodePen / 答案 | |:---:|:-------------- |:----------------------------------------------------------------------------- | | 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/yyBzaLb?editors=1010) | | 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/EaYevoM?editors=1011) | | 3 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/raBZKJV?editors=1010) | | 4 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/OPLBzby) | | 5 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/XJrxVVB) | | 6 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/PwYyEdG?editors=0010) | | 7 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/pvzxpLp?editors=0011) | | 8 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/ZYzqvqj) | | 9 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/ZYzqvdq?editors=1010) | | 10 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/LEPgQPY) | |11|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/zxOmROX?editors=1011)| | 12 | Nocab |[CodePen](https://codepen.io/PeihanWang/pen/bNbmLNY?editors=1010)| | 13 | Aaron 謝宗佑 |[CodePen](https://codepen.io/aaron-hsieh/pen/EaYdQWY)| | 14 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/mybzXOW?editors=0011)| | 15 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/PwYyQOE?editors=0011)| | 16 | Clove | [Codepen](https://codesandbox.io/p/sandbox/day29-react-yuan-jian-lian-xi-6-sui-tang-ce-yan-93fk76) | | 17 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/YPKJLJP?editors=1010) | | 18 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/ogvadPK) | | 19 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/xbKyaxj) | | 20 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/WbeaaNd) | | 21 | Amanda | [Codepen](https://codepen.io/cym199922/pen/VYZEEja) | | 22 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/JoPmwYB?editors=1011) | | 23 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/XJrymmX) | | 24 | Toung | [Codepen](https://codepen.io/Toung/pen/mybQpZe) | | 25 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/YPKdWrr) | | 26 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/gbYNOrY?editors=1011) | | 27 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/Pwoomzp?editors=1010) | | 28 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/yyLOdPP) | | 29 | 郭庭妤 | [Codepen](https://codepen.io/flora_Kuo/pen/xbxENqZ?editors=1011) | | 30 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/PwomLZj?editors=1011) | | 31 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/yyLPMpG?editors=1010) | | 31 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/Eaxemrp?editors=1011) | | 32 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/QwwYydz?editors=0010) | | 33 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/jEPJXjr?editors=1011) | | 34 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/EaPgLzw) | --- - 快速複製格式： ```markdown! | 0 | user | [Codepen]() | ```