---
# System prepended metadata

title: "\U0001F3C5Day25 - React 元件練習 (2) - 元件 props 資料傳遞"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day25 - React 元件練習 (2) - 元件 props 資料傳遞

當我們想要將資料傳遞給子元件時，可以透過 props 來做傳遞。元件就像是 JavaScript 的 function，它可以接收任意的參數（即稱之為「props」），props 會回傳 React element，包含 children 以及自定義的參數。舉例來說：
```jsx=
function Child({ name }) {
  return <p>{name}</p> 
};
function Example() {
  return (
    <div>
      <Child name="John" />
    </div>
  );
}
```
在這個例子中，在 Child 定義了 name 這個參數，並給予 John 這個值。因此在 Child 元件就可以從 props 中取得 name 來使用。
備註：這邊的 `{ name }` 是物件解構的寫法，這裡也可以改成
```jsx=
function Child(props) {
  return <p>{props.name}</p> 
};
```

#### 文件參考
- [Your First Component](https://react.dev/learn/your-first-component#defining-a-component)
- [Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component)
- [物件解構文件參考](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/WNVgZYd?editors=1010)，並使用 props 將資料傳到 Child 元件中，並顯示 `Hello, EveryOne!`


<!-- 解答： 
```
// props 練習
function Child({target}) {
  return <p>Hello, {target}!</p> 
};
function Example() {
  return (
    <div>
      <Child target="EveryOne" />
    </div>
  );
}
```
-->
| Name        | Codepen                                                                      |
| ----------- | ---------------------------------------------------------------------------- |
| Mikka       | [codepen](https://codepen.io/Miikaa/pen/azZmjzG)                             |
| 7lun        | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/bNegvZe?editors=1010)     |
| Jin         | [codepen](https://codepen.io/Jin-L/pen/yyJgRyZ)                              |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/qENRJdb)                   |
| Rogan       | [Codepen](https://codepen.io/RoganHsu/pen/dPXNgpN?editors=1010)              |
| Noooora     | [CodePen](https://codepen.io/Nora-Ch/pen/pvbRxNY)                            |
| Eileen      | [CodePen](https://codepen.io/Eileen-io/pen/bNegmBj)                          |
| 叮咚        | [CodePen](https://codepen.io/pinchieh-lin/pen/MYepNwm)                       |
| 星雪糖      | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/raLjqza?editors=0010) |
| Melanie     | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/XJKpxVm)              |
| RUDY        | [CodePen](https://codepen.io/Rudy-crw/pen/QwEdZmo?editors=0010)              |
| 地瓜        | [CodePen](https://codepen.io/ChippyYU/pen/MYeJPGW)                           |
| 老屠        | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/GgqrYYG?editors=0010) |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/OPXWaPq)                           |
| Marco       | [Codepen](https://codepen.io/MarcoChiu/pen/RNRKqae)                          |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/RNRKErw)                            |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/xbOgmLe?editors=1010) |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/PwzWXap)                            |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/jEryRXx)                           |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/dPXNEZW)                              |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/yyJgzGy)                           |
| cks40660    | [Codepen](https://codepen.io/CKS40660/pen/ogLBRaw)                           |
| cks40660    | [Codepen](https://codepen.io/Fang-the-selector/pen/OPXWKvW?editors=1010)     |
| wind        | [Codepen](https://codepen.io/wind7y/pen/raLjXKQ)                             |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/VYjpZYK?editors=0010)           |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/LEZWxYj?editors=1010)            |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/emzvKpx?editors=1010)  |
| Leonard     | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/OPXpovR?editors=0010)     |
| 社子畢卡索  | [Codepen](https://codepen.io/pen?template=myEWNXy)                           |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/RNRKeZj?editors=1010)           |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/PwzmxOy?editors=0010)              |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/OPXjXOZ)              |
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/wBWqzeV)                            |
| 小趴        | [Codepen](https://codepen.io/papa2415/pen/ZYOJBWv)                           |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/bNerYmm)                            |
| TWLeoC      | [Codepan](https://codepen.io/TWLeoC/pen/LEZzQmq)                             |
| Wen         | [Codepen](https://codepen.io/hsiao-kevin/pen/pvbpQWW?editors=1010)           |
| tanuki      | [Codepen](https://codepen.io/tanuki320/pen/gbMoyVK)                          |
| 伊迪        | [Codepen](https://codepen.io/sorryFish/pen/XJKYwWx)                          | 