學會如何組合多個 React 元件

Then, you can react your dream house

Minecraft 是一款自由組合方塊的遊戲,這讓許多玩家發揮創意,堆疊出許多雄偉壯觀的建築物,並且從中取得樂趣和成就

上一篇文章,你應該已經瞭解到如何定義一個 React 元件。

在這一篇文章中,我們將學習如何將這些元件拼湊起來。這個能力就好比「砌磚」一樣,你會享受到從小磚塊蓋到大房子的樂趣和成就。

先了解學習重點

在這一篇文章中,你將會學習到:

  1. 元件是可以層層包覆的
  2. 如何組合多個 React 元件

學習「如何組合元件」

上面這一段程式是上一篇「動手做」完成的,我們建立了兩個元件 TodoApp 和 TodoHeader。

但是在頁面中,我們卻只能顯示其中一個元件。

那麼我們該怎麼把 TodoApp 和 TodoHeader 組合起來呢?

口訣:元件是可以層層包覆的!

你可以看到 TodoApp 的 render 方法中,它回傳的 div element 也包含了 TodoHeader。

這讓 React 了解到「我在繪製 TodoApp 的時候,也需要繪製 TodoHeader」,因此它會呼叫 TodoHeader 的 render 方法來得到 TodoHeader 的樣貌。

最後,React 會在頁面上繪製這樣的 element:

<div>
<div>
<h1>我的待辦清單</h1>
<small>3 項未完成待辦事項</small>
</div>
</div>

動手做,嘗試蓋更大的房子

這次練習的目標是:將 InputField, TodoList 兩個元件與 TodoApp 進行合併。

你可以直接在 jsfiddle 上進行修改,它已經幫你完成了 InputField 和 TodoList 兩個元件了。

你要做的是:

  1. 將 InputField, TodoList 合併在 TodoApp 中
  2. 試著調換元件的順序,看會發生什麼事

重點整理

  1. 元件是可以層層包覆的

下集預告

下一集,「透過 props 傳遞元件參數,讓你的元件可以重複使用」。
我們即將學習如何設計一個可以重複使用的元件囉,盡情期待。

你應該會想看的

上一篇系列文章

音樂

Like what you read? Give Jason Chung a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.