ReactJS - Properties (props)：初學者的指南

你好，未來的React開發者們！今天，我們將深入React最基礎的概念之一：屬性，或者我們親切地稱之為「props」。別擔心如果你是編程新手——我會一步步引導你，就像我過去幾年來為無數學生做的那樣。讓我們一起踏上這個令人興奮的旅程！

ReactJS - Properties (props)

Props是什麼？

在我們進入代碼之前，讓我們先了解props是什麼。想像你正在建造一個房子（我們的React應用程序）。Props就像設計圖，告訴每一個房間（組件）它應該長得什麼樣以及它應該包含什麼。它們是一種從父組件向子組件傳遞數據的方式。

使用Props

讓我們從一個簡單的例子開始。我們將創建一個Greeting組件，它顯示一條個人化的訊息。

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}

在這個例子中，name是我們傳遞給Greeting組件的prop。讓我們分解一下：

我們定義了一個Greeting組件，它期望一個props對象。
在Greeting內部，我們使用props.name來訪問name prop。
在我們的App組件中，我們兩次使用Greeting，傳遞不同的name props。

當你運行這段代碼時，你會看到兩個問候："Hello, Alice!" 和 "Hello, Bob!"。

傳遞多個Props

Props不僅限於字符串。讓我們擴展我們的Greeting組件以包括更多信息：

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>年齡: {props.age}</p>
<p>最喜歡的顏色: {props.color}</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={28} color="blue" />
<Greeting name="Bob" age={32} color="green" />
</div>
);
}

現在我們傳遞了三個props：name、age和color。注意我們是如何為age prop使用大括號{}的？這是因為我們傳遞的是一個數字，而不是字符串。

預設Props

有時候，你希望為一個prop提供一個 fallback 值，以防它沒有被提供。這就是預設props派上用場的地方。讓我們修改我們的Greeting組件以擁有一個預設年齡：

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>年齡: {props.age}</p>
</div>
);
}

Greeting.defaultProps = {
age: 25
};

function App() {
return (
<div>
<Greeting name="Alice" age={28} />
<Greeting name="Bob" />
</div>
);
}

在這個例子中，如果我們不提供age prop（例如Bob），它將默認為25。

Props與State的對比

現在我們了解了props，讓我們將它們與另一個重要的React概念對比：state。這裡有一個快速的對比：

Props	State
從父組件傳遞到子組件	在組件內部管理
只讀	可以被改變
有助於組件之間的通信	讓組件具有動態性

讓我們通過一個簡單的計數器組件來看看這是怎麼工作的：

import React, { useState } from 'react';

function Counter(props) {
const [count, setCount] = useState(props.initialCount);

return (
<div>
<p>計數: {count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}

function App() {
return (
<div>
<Counter initialCount={0} />
<Counter initialCount={10} />
</div>
);
}

在這個例子中：

initialCount 是一個prop。它從App傳遞到Counter並不會改變。
count 是state。它使用initialCount的值初始化，但可以被setCount函數改變。

結論

Props是React的基本組成部分，讓你可以創建有彈性、可重用的組件。它們就像是你React菜譜中的秘密成分，讓你的菜譜獨特而美味！

記住：

Props從父組件流向子組件。
它們是只讀的——不要嘗試直接改變props！
使用預設props來提供fallback值。
Props用於傳遞數據，state用於管理數據。

隨著你繼續你的React之旅，你會發現自己在越來越複雜和有趣的方式中使用props。但別擔心——隨著練習，它會變得習以為常。就像學騎自行車一樣，一旦你掌握了它，你就永遠不會忘記！

繼續編碼，持續學習，最重要的是，玩得開心！React是一個令人驚奇的庫，我為你即將發現它所提供的一切感到興奮。直到下一次，快樂React！

Credits: Image by storyset