學會如何組合多個 React 元件
Then, you can react your dream house
Published in
3 min readMar 16, 2016
繼上一篇文章,你應該已經瞭解到如何定義一個 React 元件。
在這一篇文章中,我們將學習如何將這些元件拼湊起來。這個能力就好比「砌磚」一樣,你會享受到從小磚塊蓋到大房子的樂趣和成就。
先了解學習重點
在這一篇文章中,你將會學習到:
- 元件是可以層層包覆的
- 如何組合多個 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 兩個元件了。
你要做的是:
- 將 InputField, TodoList 合併在 TodoApp 中
- 試著調換元件的順序,看會發生什麼事
重點整理
- 元件是可以層層包覆的
下集預告
下一集,「透過 props 傳遞元件參數,讓你的元件可以重複使用」。
我們即將學習如何設計一個可以重複使用的元件囉,盡情期待。