ReactJS - 使用屬性創建組件

Hello there, future React developers! Today, we're going to embark on an exciting journey into the world of React components and properties. As your friendly neighborhood computer teacher, I'm here to guide you through this adventure step by step. So, grab your favorite beverage, get comfortable, and let's dive in!

ReactJS - Creating Components using Properties

什麼是 React 組件和屬性？

在我們開始創建組件之前，讓我們先了解它們是什麼。想像你正在用樂高積木蓋房子。每一塊樂高積木就像是一個 React 組件 - 你的網頁應用程序的可重複使用的建築塊。現在，如果你想要定制這些樂高積木呢？那就是屬性（或 props）的用處。它們就像是你給每一塊樂高積木的特殊指示，讓它們變得獨特。

如何使用屬性創建組件

讓我們從一個簡單的例子開始。我們將創建一個 "Greeting" 組件，對不同的人說你好。

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

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

讓我們分解這段代碼：

我們定義了一個 Greeting 函數，它接受 props 作為參數。
在函數內部，我們返回一些 JSX（這是 React 寫作類似 HTML 代碼的方式）。
我們使用 {props.name} 來插入 name 屬性的值。
在我們的 App 組件中，我們三次使用 <Greeting />，並為每個 name 屬性指定不同的值。

當你運行這段代碼時，你會看到三個問候，每個都有不同的名字。這就像有一個友好的機器人，可以對你介紹的任何人問候！

添加更多屬性

現在，讓我們通過添加一些屬性來使我們的問候更有趣：

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>You are {props.age} years old and you love {props.hobby}.</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={25} hobby="painting" />
<Greeting name="Bob" age={30} hobby="playing guitar" />
</div>
);
}

在這裡，我們添加了 age 和 hobby 屬性。注意我們是如何使用花括號 {} 包圍 age 屬性的？這是因為我們傳遞的是數字，而不是字符串。對於字符串，我們使用引號，但對於數字或 JavaScript 表達式，我們使用花括號。

使用對象作為屬性

有時候，將相關數據組合成一個對象會更方便。讓我們重構我們的 Greeting 組件以使用對象屬性：

function Greeting(props) {
return (
<div>
<h1>Hello, {props.person.name}!</h1>
<p>You are {props.person.age} years old and you love {props.person.hobby}.</p>
</div>
);
}

function App() {
const alice = { name: "Alice", age: 25, hobby: "painting" };
const bob = { name: "Bob", age: 30, hobby: "playing guitar" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

在這個版本中，我們傳遞一個單一的 person 對象作為屬性，其中包含關於每個人的所有信息。這可以讓你的代碼更清晰，特別是當你有許多相關屬性時。

屬性解構

隨著你的組件成長，你可能會發現自己經常在打 props.。有一個很酷的技巧叫做 "解構"，可以讓你的代碼更清晰：

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

這與我們之前的例子做同樣的事情，但更簡潔。我們說 "將 person 屬性解構並提取 name、age 和 hobby”。

預設屬性

如果有人忘記傳遞一個屬性給我們的組件呢？我們可以設置預設值以避免錯誤：

function Greeting({ person = { name: "Guest", age: "unknown", hobby: "mysteries" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

現在，如果我們使用 <Greeting /> 而沒有傳遞任何屬性，它將使用這些預設值而不是崩潰。

屬性類型

隨著你的應用程序成長，檢查你是否獲得了正確類型的屬性是一個好主意。React 有一个特性叫做 PropTypes 用於此：

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

這會在傳遞錯誤類型的數據到你的組件時警告你。這就像有一個友好的助手會複核你的工作！

結論

恭喜你！你剛剛學會了創建帶有屬性的 React 組件的基本知識。記住，屬性是你給你的組件的指示，讓它們變得動態和可重用。它們是 React 的基礎，掌握它們將會在你學習 React 的道路上帶你走得很遠。

這裡是我們已經涵蓋的方法的快速參考表：

方法	描述
基本屬性	傳遞個別值給組件
對象屬性	傳遞一個包含多個值的單一對象
屬性解構	從屬性中提取值以使代碼更清晰
預設屬性	為遺漏的屬性設置 fallback 值
屬性類型	驗證傳遞到組件的屬性的類型

繼續練習、試驗和建造！React 是一個強大的工具，而你已經走上了成為 React 高手的道路。快樂編程！

Credits: Image by storyset