ReactJS - Component 布局

你好，有志於React的開發者們！我很興奮能夠帶領你們進入ReactJS中布局組件的精彩世界。作為一個教導計算機科學多年的老師，我見過無數學生在掌握這些概念時眼睛發亮。那麼，我們一起踏上這次旅程吧，如何？

理�悉布局組件

在我們深入研究代碼之前，讓我們先來討論一下布局組件是什麼，以及它們為什麼重要。想像你正在蓋一個房子。布局就像是設計圖 - 它決定了每樣東西的位置。在React中，布局組件有著類似的作用。它們幫助你結構化應用程序，使其更加有組織且容易維護。

為什麼使用布局組件？

1. 一致性：它們確保你的應用程序有一個統一的的外觀。
2. 可重用性：你可以在多個地方使用相同的布局。
3. 分離關注點：它們將你的結構與你的內容分開。

現在，讓我們看一個例子，了解這在實踐中是如何工作的。

布局組件的例子

首先，我們將創建一個簡單的布局組件，其中包括頁眉和頁腳，中間有內容的空間。

import React from 'react';

const Layout = ({ children }) => {
return (
<div className="layout">
<header>
<h1>我的超級應用程序</h1>
</header>
<main>{children}</main>
<footer>
<p>&copy; 2023 我的超級應用程序</p>
</footer>
</div>
);
};

export default Layout;

讓我們分解一下：

1. 我們導入React（在React組件中總是需要的）。
2. 我們定義一個名為 Layout 的函數式組件。
3. 它接受一個名為 children 的prop，這是React中的一個特殊prop，包含了在組件的開始標籤和結束標籤之間傳遞的內容。
4. 組件返回JSX（React用於描述UI的語法），其中包括頁眉、主要內容區域和頁腳。
5. 我們在主節中使用 {children} 來渲染傳遞給這個組件的任何內容。

現在，讓我們看看我們如何使用這個Layout組件：

import React from 'react';
import Layout from './Layout';

const HomePage = () => {
return (
<Layout>
<h2>歡迎來到我的超級應用程序！</h2>
<p>這是首頁的內容。</p>
</Layout>
);
};

export default HomePage;

在這個例子中，HomePage 組件使用我們的 Layout 組件。<Layout> 標籤之間的內容變成了我們Layout組件中的 children prop。

在組件中共享邏輯：渲染 Props

現在，我們理解了基本的布局組件，讓我們進一步了解一個叫做“渲染 Props”的概念。這是一種在React組件之間共享代碼的強大技術。

究竟什麼是渲染 Props？

渲染 Props 是一種技術，其中一個組件接收一個函數作為prop，並使用這個函數來渲染某物。這就像給組件一個“菜譜”，告訴它要渲染什麼。

讓我們看一個例子：

import React, { useState } from 'react';

const ToggleComponent = ({ render }) => {
const [isOn, setIsOn] = useState(false);

const toggle = () => setIsOn(!isOn);

return render(isOn, toggle);
};

const App = () => {
return (
<div>
<ToggleComponent
render={(isOn, toggle) => (
<div>
<button onClick={toggle}>{isOn ? '關閉' : '開啟'}</button>
<p>開關是 {isOn ? '開' : '關'}。</p>
</div>
)}
/>
</div>
);
};

export default App;

讓我們分解一下：

1. 我們創建一個 ToggleComponent，它管理自己的狀態（isOn）並提供一個 toggle 函數。
2. 它不僅僅是渲染自己的UI，而是調用 render prop 函數，傳遞 isOn 和 toggle 作為參數。
3. 在 App 組件中，我們使用 ToggleComponent 並提供一個函數作為 render prop。
4. 這個函數接收 isOn 和 toggle 並返回我們想要渲染的實際UI。

這種方法的妙處在於 ToggleComponent 可以被重用，並且有著不同的UI。我們可以用它來做燈開關、彈窗或任何需要開/關功能的東西！

方法表

這裡是一個總結我們討論過的關鍵方法的表：

方法	描述	示例
useState	一個讓你可以為函數式組件添加狀態的React Hook	const [isOn, setIsOn] = useState(false);
children	一個特殊的prop，讓你可以將組件作為數據傳遞給其他組件	<Layout>{/* 子組件 */}</Layout>
渲染 Props	一種使用prop的值為函數來在React組件間共享代碼的技術	<ToggleComponent render={(isOn, toggle) => (/* ... */)} />

記住，熟練是需要練習的！嘗試創建你自己的布局組件並實驗渲染 Props。你會驚訝於你能夠多快地創建有彈性、可重用的組件。

總結來說，布局組件和渲染 Props 是你React工具箱中的強大工具。它們讓你能夠創建有組織、可重用和靈活的代碼。在你繼續React的旅程時，你會找到無數應用這些概念來創建驚艷用戶界面的方法。開心編程！

Credits: Image by storyset