學會如何組合多個 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 傳遞元件參數，讓你的元件可以重複使用」。

我們即將學習如何設計一個可以重複使用的元件囉，盡情期待。

你應該會想看的

上一篇系列文章

得到，人生中的第一個 React 元件

音樂