Try   HackMD

在開發專案時,一定會遇到有一區塊的程式碼內容都相同,這時通常會將此區塊的程式碼拆成一個元件,提高元件的重複,亦或是將一個頁面做為一個元件來切換等等。


在 React 中建立一個 function component 非常簡單,如同定義一個函式,並在父元件中引入即可。
舉例:

function Chid() { // 子元件 return <p> Child </p> } function Example() { // 父元件 return <div> Example <Chid /> </div> }

補充

如果要在子元件再加入其他元件,可以運用 children 這個 props 來往下加入。
舉例:

function Main({children}) { return <div> Main {children}</div> } function Child() { return <div> Child </div> }
function Example() { return <div> <Main> <Child /> </Main> </div> }

題目

請複製 (右下角 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
  • 快速複製格式:
| 0 | user | [Codepen]() |