歡迎來到「24 小時，React 快速入門」系列教學 🎓 Level 5 ～！
：Wish you have a happy learning!
- 完成主線任務：完成所有元件雛形，並將它們組合起來
- 習得心法：
- 了解元件組合的思維
- 清楚元件封裝的時機
完成 TodoHeader, TodoList, InputField 三個元件，並讓它們顯示自己的名稱。
為了要在頁面中渲染這些元件，我們在 TodoApp 中組合它們：
/** TodoApp.js */
// 1. 使用元件類別前，記得先從 window.App 中取出
const {
InputField,
TodoHeader,
TodoList
} = window.App;
class TodoApp extends React.Component {
render() {
// 2. 組合元件的觀念，與架構 HTML 元素是一樣的
return (
<div>
<TodoHeader />
<InputField />
<TodoList />
</div>
);
}
}
window.App.TodoApp = TodoApp;最後，請確保你的瀏覽器會顯示：
這一步，我們要完成 TodoHeader, TodoList, InputField 三個元件的細節，讓它們的排版與第一關設計的 wireframe 一樣：
按照上述步驟，TodoList 的 render 方法程式會如下：
/** TodoList.js */
render() {
return (
<ul>
<li>
<input type="checkbox" />
<span>Item 1</span>
<button>x</button>
</li>
<li>
<input type="checkbox" />
<span>Item 2</span>
<button>x</button>
</li>
<li>
<input type="checkbox" />
<span>Item 3</span>
<button>x</button>
</li>
</ul>
);
}
考量到項目會有重複的行為，例如：切換處理狀態、編輯、刪除等，因此我們必須把每筆項目再封裝成單一元件。還記得第一關我們設計了哪些元件嗎？是的，上述步驟我們少了一個 TodoItem 元件！
因此這一步我們必須完成 TodoItem 元件，並且修改 TodoList 的程式如下：
/** TodoList.js */
render() {
return (
<ul>
<li>
<TodoItem />
</li>
<li>
<TodoItem />
</li>
<li>
<TodoItem />
</li>
</ul>
);
}最後，請確認你的瀏覽器正常的顯示 TodoApp！
- 元件是可以層層包覆的
- 為了減少重複的程式碼、增加程式的重用性，我們可以透過元件封裝來解決
｜ 主頁 ｜ 上一關 ｜ 下一關. 使用 props 傳遞元件參數 ｜
｜ 🙋 我要提問 ｜