在開發專案時,一定會遇到有一區塊的程式碼內容都相同,這時通常會將此區塊的程式碼拆成一個元件,提高元件的重複,亦或是將一個頁面做為一個元件來切換等等。
在 React 中建立一個 function component 非常簡單,如同定義一個函式,並在父元件中引入即可。
舉例:
如果要在子元件再加入其他元件,可以運用 children 這個 props 來往下加入。
舉例:
請複製 (右下角 fork)這個範例,並試著定義三個不同的子元件練習來完成以下畫面。
示意圖:
完成畫面:
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖(需打開程式碼的部分觀看)
# | Discord | CodePen / 答案 |
---|---|---|
1 | MY | Codepen |
2 | Sonia | Codepen |
3 | Noy(Toad) | Codepen |
4 | LinaChen | Codepen |
5 | Jasmine | Codepen |
6 | 4chan | Codepen |
7 | han | Codepen |
8 | Satar | Codepen |
9 | Hailey | CodePen |
10 | tim | Codepen |
11 | 毛巾 | Codepen |
12 | 邵 | Codepen |
13 | Nocab | Codepen |
14 | Toung | Codepen |
15 | Amanda | Codepen |
16 | Yen | Codepen |
17 | Clove | Codepen |
18 | mercury2508. | Codepen |
19 | Kaya | Codepen |
20 | Aaron 謝宗佑 | Codepen |
21 | 嚼勁先生 | Codepen |
22 | ya_meow | Codepen |
23 | Johnson | Codepen |
24 | 泊岸 | Codepen |
25 | anderson666 | Codepen |
26 | Fabio20 | Codepen |
27 | Rochel | Codepen |
28 | 蘑菇星星 | Codepen |
29 | Ariel | Codepen |
30 | kun._c8_shake_it | Codepen |
31 | yun-lin | Codepen |
32 | yaoling.liang | Codepen |
33 | 郭芙蘭 | Codepen |
34 | Joannehu | Codepen |
35 | KOMATSU PEI | Codepen |
36 | 姜承 | Codepen |
37 | jinliu214 | Codepen |