---
# System prepended metadata

title: "\U0001F3C5Day29 - React 元件練習 (6) - 隨堂測驗"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day29 - React 元件練習 (6) - 隨堂測驗

# 隨堂測驗
請根據下面題目來完成測驗

## 題目
1. 請將產品利用元件的方式拆出來，並且將資料傳入呈現在畫面上。
2. 請將頁籤區塊拆成元件，並且呈現在畫面上 ( 功能不需要做 )。

請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/mdNaWoK?editors=1011)，並且完成以下條件：


<!-- 解答： 
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 />);
-->

| Name | Codepen | 
| -------- | -------- |
| Mikka     | [codepen](https://codepen.io/Miikaa/pen/KwMNxaR)     |
| 7lun     | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/GgqmBgQ)     |
| Rogan | [codepen](https://codepen.io/RoganHsu/pen/QwEgQBm?editors=1011)     |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/QwEgQzr?editors=1111)|
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/vEKZRxJ?editors=0010)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/pvbwLrm)|
| Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/EayXEvP)|
| 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/vEKZRVR?editors=0011)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/azZwYRp)|
| Jin |[Codepen](https://codepen.io/Jin-L/pen/vEKZjzM)|
| Marco |[Codepen](https://codepen.io/MarcoChiu/pen/RNRgJoP)|
| cks40660 |[Codepen](https://codepen.io/CKS40660/pen/QwEgBwV)|
| KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/bNeRvLO?editors=0010)|
| Eileen |[Codepen](https://codepen.io/Eileen-io/pen/pvbwOzJ)|
| 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/XJKgPrN?editors=1010)|
| 社子畢卡索 |[Codepen](https://codepen.io/pen?template=dPXRgYB)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/azZwQNO?editors=0010)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/emzRbmd) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/LEZxOEQ) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/raLwPZP?editors=0010) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/LEZLvYO) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/GgqEePG?editors=1011) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/bNeRJoG) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/myEwYgR?editors=0010) |
| wind | [Codepen](https://codepen.io/wind7y/pen/KwMvPmy) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/RNRZrXz?editors=0011) |
|ZoeKang|[Codepen](https://codepen.io/byehywmx-the-animator/pen/RNRZRYx)|
|舜仁|[Codepen](https://codepen.io/shunjen/pen/KwMvNWX)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/myEMOBe)|
| Jenna |[Codepen](https://codepen.io/abiscc14/pen/KwMvGBZ)|
| JiaMori |[Codepen](https://codepen.io/jiamori/pen/bNeYyZp)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/vEKpJpZ?editors=0012)|
| Wen |[Codepen](https://codepen.io/hsiao-kevin/pen/jErxQEj?editors=1011)|

