---
tags: 2022 React 新手讀書會
---
# 🏅 Day 9｜元件 props 資料傳遞
當我們想要將資料傳遞給子元件時，可以透過 props 來做傳遞。元件就像是 JavaScript 的 function，它可以接收任意的參數（即稱之為「props」），props 會回傳 React element，包含 children 以及自定義的參數。舉例來說：

function Child({ name }) {
  return <p>{name}</p> 
};
function Example() {
  return (
    <div>
      <Child name="John" />
    </div>
  );
}

在這個例子中，在 Child 定義了 name 這個參數，並給予 John 這個值。因此在 Child 元件就可以從 props 中取得 name 來使用。
備註：這邊的 `{ name }` 是物件解構的寫法，這裡也可以改成

function Child(props) {
  return <p>{props.name}</p> 
};

#### 文件參考
- [Props 文件參考](https://zh-hant.reactjs.org/docs/components-and-props.html#rendering-a-component)
- [物件解構文件參考](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

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

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

// props 練習
function Child({target}) {
  return <p>Hello, {target}!</p> 
};
function Example() {
  return (
    <div>
      <Child target="EveryOne" />
    </div>
  );
}

-->

回報區
---

| Discord | CodePen / 答案 |
|:-----------------------:|:----------------------------------------------------------------------------:|
| Rice#8043 | [CodePen](https://codepen.io/riecball/pen/zYWEdEp?editors=1010) |
| 無名#6427 | [CodePen](https://codepen.io/Nomoney/pen/BarPXyN?editors=1010) |
| yunyun#5215 | [CodePen](https://codepen.io/yun_yunni/pen/rNdrXLJ) |
| Vita Ora#4585 | [CodePen](https://codepen.io/showlovezz/pen/bGvjXwe?editors=0010) |
| Eric Su#7798 | [CodePen](https://codepen.io/wc-su/pen/dymjMYX) |
| 魚魚#0937 | [CodePen](https://codepen.io/fish0522/pen/XWEBvjE) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/PoRBMbq) |
| IceSam#7836 | [Codepen](https://codepen.io/sam-hsu/pen/JjLBgRm) |
| 棒腿 #9350 | [Codepen](https://codepen.io/frankHsu/pen/LYdBwxq?editors=0010) |
| AllenW#1132 | [Codepen](https://codepen.io/AllenW/pen/wvmxVoG?editors=1111) |
| DIANAxAKKO#4298 | [Codepen](https://codepen.io/redfire29/pen/Yzajmrm?editors=1010) |
| 真．穎旻粉撕#4995 | [Codepen](https://codepen.io/gbnbihif/pen/dymjxVE) |
| aki | [codepen](https://codepen.io/aki168/pen/QWmBeqv) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/rNdrXdr) |
| IreneLee#7932 | [codePen](https://codepen.io/ntjtcxpt-the-animator/pen/bGvjXMq?editors=1010) |
| Morris#8755 | [Codepen](https://codepen.io/morrisss/pen/WNzKVZp?editors=1010) |
| NinaKuo#3332 | [Codepen](https://codepen.io/ninakuo0814/pen/abYjeKP) |
| Mitour#0672 | [CodePen](https://codepen.io/mitour/pen/mdxjNvP?editors=0010) |
| Yiling#4054 | [Codepen](https://codepen.io/lin010/pen/vYRaoPN?editors=1011) |
| huch09#1426 | [codepen](https://codepen.io/subarashii-huch09/pen/eYMjqaP?editors=1010) |
| Kimi#2092 | [Codepen](https://codepen.io/a3216lucy/pen/xxWJvoo) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/BarPXXZ) |
| Ayre#0016 | [Codepen](https://codepen.io/yichunlin09/pen/rNdZBaP?editors=0010) |
| SHIN#6075 | [Codepen](https://codepen.io/shin9626/pen/zYWJOvQ) |
| hiYifang #0736 | [Codepen](https://codepen.io/hiYifang/pen/PoRdYNj) |
| JessSong#5050 | [Codepen](https://codepen.io/jssanji03/pen/YzaOKGG) |
| C#4593 | [Codepen](https://codepen.io/ShaniMa/pen/zYWJOdO) |
| HedgehogKU | [CodePen](https://codepen.io/hedgehogkucc/pen/BarOBwY?editors=1010) |
| Yanyan#3555 | [Codepen](https://codepen.io/wei-yi-lee/pen/bGvxboM?editors=1010) |
| 翔#0859 | [Codepen](https://codepen.io/energy95272z/pen/MWVqgrR) |
| Timothy#5863 | [Codepen](https://codepen.io/timothy_hippo/pen/poLOzLG?editors=0010) |
| L0F0#8733 | [Codepen](https://codepen.io/l0f0/pen/oNqPvPB?editors=0010) |
| YuZhun#1362 | [Codepen](https://codepen.io/danzhun/pen/LYdJPqx) |
| rainbow#3329 | [Codepen](https://codepen.io/g901612002/pen/mdxGdrj?editors=1010) |
| Vada Chen#2055 | [CodePen](https://codepen.io/vadachen/pen/wvmEvmL?editors=0010) |
| Shau#6400 | [CodePen](https://codepen.io/shau-chen/pen/vYRzYvv) |
| JasonLu | [CodePen](https://codepen.io/wnptocip/pen/abYabxq?editors=1010) |
| kevinhes#2881 | [CodePen](https://codepen.io/kevinhes/pen/yLKxLdg?editors=1011) |
| Wu#0167 | [CodePen](https://codepen.io/Xander0705/pen/RwMYwzd) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/abYazOG?editors=0010) |
| 吉利#3810 | [codepen](https://codepen.io/gillianyy/pen/qBoMEbJ) |
| 葉秋#2335 | [codepen](https://codepen.io/as880074/pen/poLOvrr) |
| wiimax#4564 | [Codepen](https://codepen.io/willismax/pen/dymqPmB) |
| niel#2413 | [Codepen](https://codepen.io/danielhsu/pen/xxWabEa) |
| JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/BarONaZ) |
| Tsuei#9284 | [CodePen](https://codepen.io/AlbertoLL/pen/wvmEaar) |
| LEO#7779 | [CodePen](https://codepen.io/nekorice/pen/MWVqwjz) |
| 彼得#1923 | [Codepen](https://codepen.io/shiou-ho/pen/rNdZVqN) |
| hw#0715 | [Codepen](https://codepen.io/Lhwei/pen/MWVqwZN) |
| Neal#0665 | [codepan](https://codepen.io/neallkf/pen/bGvxVdz?editors=1010) |
| Dylan_Lin#7320 | [Codepen](https://codepen.io/lin-dylan/pen/poLOjEo) |
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/wvmEKvQ?editors=1010) |
| Midnightdinner#6220 | [Codepen](https://codepen.io/woowooyong/pen/JjLaYVL) |
| Ada | [codepan](https://codepen.io/zggsoagv-the-scripter/pen/zYWJvMd) |
| YJ#1839 | [codepan](https://codepen.io/cshjufxc/pen/LYdJpKB) |
| RON#2813 | [Codepen](https://codepen.io/Ron115/pen/mdxGVdY) |
| ChloeLo#4858 | [Codepen](https://codepen.io/chloelo/pen/NWYLqKw) |
| Chelly#6129 | [Codepen](https://codepen.io/chellyhsu/pen/rNdZOYW) |
| Mr.Sean#3825 | [Codepen](https://codepen.io/sean_1215/pen/LYdJNQN) |
| 城堡#2126 | [Codepen](https://codepen.io/tthcastle/pen/KKoxzRb) |
| easton#3863 | [Codepen](https://codepen.io/EastonIsCodingNow/pen/mdxGEOK) |
| Stanley#2505 | [Codepen](https://codepen.io/bigbearada/pen/BarOzZb) |
| Mao#5230 | [Codepen](https://codepen.io/taomaomao/pen/eYMLdpG) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/qBoMaVg) |
| lingxuan | [Codepen](https://codepen.io/lingxuan0618/pen/zYWJoOe) |
| Ryder#7398 | [Codepen](https://codepen.io/rider159159/pen/dymqNbR) |
| Carolkiki2003#7399 | [Codepen](https://codepen.io/wasfzuig/pen/QWmVNBJ) |
| Wins#8457 | [Codepen](https://codepen.io/winszhuang/pen/qBoMRJx) |
| 雅帆 | [Codepen](https://codepen.io/yafanchung/pen/LYdJWXo?editors=1010) |
| 山貓(焜)#7041 | [Codepen](https://codepen.io/pen?template=NWYLjWa) |
| Anson#3594 | [Codepen](https://codepen.io/huanmingchang/pen/BarOmKq) |
| 露易莎#7673 | [Codepen](https://codepen.io/louisa-lin/pen/mdxGpRN?editors=1010) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/abYaEPP) |
| Bumble幫啵#0255 | [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/vYRzpoN) |
| React-慧茹(拉拉醬)#3414 | [Codepen](https://codepen.io/lala-lee-jobs/pen/gOedoEr) |
| EvaLin#4546 | [Codepen](https://codepen.io/evalin0316/pen/abYaqZg?editors=1010) |
| Robert Lo#9653 | [Codepen](https://codepen.io/Robert-Lo/pen/WNzgMWY) |
| wenyun#2362 | [Codepen](https://codepen.io/wenyuncc/pen/JjLaLzM) |
| ZengZeng | [Codepen](https://codepen.io/tyzyoko/pen/JjLavXZ) |
| Nico#8739 | [Codepen](https://codepen.io/Nicof2e/pen/mdxGjMK) |
| Yihan#5560 | [Codepen](https://codepen.io/h513hh513h/pen/eYMLQZm?editors=0010) |
| GL#2256 | [Codepen](https://codepen.io/4genie/pen/KKoxbLy) |
| 灰塵貓#7994 | [Codepene](https://codepen.io/rjk66268/pen/xxWaeeM?editors=0011) |
| Joechiboo#3960 | [Codepene](https://codepen.io/joe-chiboo/pen/poLOMGW) |
| Kenge#3690 | [Codepene](https://codepen.io/pgkusn/pen/PoRyYPb) |
| TedWang | [Codepene](https://codepen.io/wangtaiyan/pen/XWExrzQ?editors=0010) |
| Alex Liao#8538 | [CodePen](https://codepen.io/hexschool/pen/bGvEmer) |
| shin#5792 | [CodePen](https://codepen.io/hah1030/pen/GRxYgWb?editors=0010) |
| Otis#8455 | [CodePen](https://codepen.io/humming74/pen/VwXEeeE?editors=1111) |
| 許揚民 Evan#4546 | [CodePen](https://codepen.io/gitevanhsu/pen/vYRVLWM?editors=1010) |
|ねこ*#9385|[Codepan](https://codepen.io/kunpao0104/pen/rNdqxdp)|
|Rikku#1756|[Codepan](https://codepen.io/rikkubook/pen/rNdqemop)|
|Rocker#6235|[Codepan](https://codepen.io/RockerLi/pen/zYWmqLV)|
|Claire#2116|[Codepan](https://codepen.io/claire-chang-the-bashful/pen/poLxbaz)|
|kyle890721#1016|[Codepan](https://codepen.io/KYLE890721/pen/QWmZGEO)|
|yoshidc#0455|[Codepen](https://codepen.io/yoshiyyc/pen/VwXEpKE)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/JjLmNqY)|
|charlottelee849#0366|[Codepen](https://codepen.io/charlotte-lee/pen/NWYBQad?editors=1010)|
|emma#3398|[Codepen](https://codepen.io/itsems/pen/yLKRoaa?editors=1010)|
|雪莉#4827|[Codepen](https://codepen.io/utshang216/pen/RwMeZov)|
|JC#8658|[Codepen](https://codepen.io/jcsamoyed/pen/xxWyLWz)|
|Kelvin#3296|[Codepen](https://codepen.io/kelvinchang/pen/mdxzqwX)|
| moitw | [codepen](https://codepen.io/tsuifei/pen/XWEPbYW?editors=1010)|
|𝓛𝓊𝒸𝓎#8635| [codepen](https://codepen.io/lucygirl/pen/wvmYydd)|
|Vader_yen維德#6563| [codepen](https://codepen.io/Vaderyen/pen/abYRjPJ?editors=1111)|
|座標33129#8748| [Codepen](https://codepen.io/ad80352/pen/KKoGxzV?editors=1010)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/ZExqgYO) |
|偉傑寶貝|[codepen](https://codepen.io/wei-nie/pen/JjLmQvE)|
|Arista#5802|[codepen](https://codepen.io/arista-hsieh/pen/zYWMrbW)|
|蘇蘇#0426|[codepen](https://codepen.io/sabine1123/pen/xxWQVeK)|
|眼睛 #0314|[codepen](https://codepen.io/thrizzacode/pen/KKorgGN)|
|Mori#5582|[codepen](https://codepen.io/flower9312/pen/rNdQJgP)|
|hsiuhsiu #7412|[codepen](https://codepen.io/hsiuhsiu/pen/abYQPbB?editors=0010)|
|KuoMin#4931|[codepen](https://codepen.io/KuoMin/pen/rNdZxVY?editors=1010)|
|JimmyChang#5558|[codepen](https://codepen.io/JimmyChangWenChi/pen/MWVzdEr)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/WNzYVBr)|
|minmin#8960|[codepen](https://codepen.io/minfan-chen/pen/PoRXwQL)|
|anby#7112|[codepen](https://codepen.io/andy-ch-bo-an/pen/zYWepWB)|
|CofCat#9226|[codepen](https://codepen.io/cofcat456/pen/NWYoMge)|
|陳sam#9117|[Codepen](https://codepen.io/euldpliv/pen/BarMbOd)
|Rose#1669|[Codepen](https://codepen.io/Rose-Wu/pen/ZExPEaj)
|eching#9183|[Codepen](https://codepen.io/echin/pen/LYdaWbZ?editors=1010)
|紅豆豆#0518|[Codepen](https://codepen.io/zoseqlpc/pen/xxWexgy?editors=0010)
|larahuang#8309|[Codepen](https://codepen.io/lara1105huang/pen/jOzRpxm)
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/KKoLwRx)
|hobby#6565|[Codepen](https://codepen.io/hobbyling/pen/xxWNGXg) |
|喬喬#2824|[Codepen](https://codepen.io/joanne-wei/pen/jOzoRJp) |
|JimHwang#3594|[Codepen](https://codepen.io/jimh1129/pen/qBozEoe) |
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/oNqrXyw?editors=0011) |
| Overy#4545 |[Codepen](https://codepen.io/overy-tsai/pen/JjLQyBQ?editors=1010)
|Kyle Lin#0561|[Codepen](https://codepen.io/thenkyle/pen/zYWgdVy)
|SleepWalk#1635|[Codepen](https://codepen.io/arthurliinn/pen/XWYEQax?editors=0110)
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/VwNGqQX)|