ReactJS - Props Validation: A Beginner's Guide
你好，未來的React開發者！今天，我們將要深入React中最重要概念之一：Props Validation。別擔心如果你是編程新手；我會一步步地引導你，就像我過去幾年來對無數學生所做的一樣。讓我們一起踏上這個令人興奮的旅程吧！
Props是什麼？
在我們深入研究驗證之前，先快速複習一下props是什麼。在React中，props（屬性的簡稱）是一種從父組件傳遞數據到子組件的方式。可以把這些看作是傳遞給函數的參數。它們是唯讀的，並幫助你的組件更加動態和可重用。
為什麼要驗證Props？
想像一下你正在蓋房子。你肯定不希望有人不小心用紙代替磚頭，對吧？同樣地，在React中，我們希望確保正確類型的數據被傳遞給我們的組件。這就是props驗證派上用場的地方。
Props驗證幫助我們： 1.及早發現錯誤 2.使代碼更具可讀性 3.為其他開發者提供文件
現在，讓我們深入了解一下如何在React中實現props驗證！
PropTypes
React有一個內置功能叫做PropTypes，它允許我們驗證組件接收到的props。這就像在組件入口有一個嚴謹但友好的門衛，檢查每個人（每個prop）是否有正確的資格進入。
安裝PropTypes
首先，我們需要安裝PropTypes。在終端中，運行以下命令：
npm install prop-types安裝完畢後，我們可以將其導入到我們的組件文件中：
import PropTypes from 'prop-types';使用PropTypes
讓我們創建一個簡單的組件來演示如何使用PropTypes：
import React from 'react';
import PropTypes from 'prop-types';
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
Greeting.propTypes = {
name: PropTypes.string
};
export default Greeting;在這個例子中，我們告訴React name prop應該是一個字符串。如果有人嘗試傳遞一個數字或其他類型，React將在控制台中顯示一個警告。
可用的驗證器
PropTypes提供了一系列的驗證器。讓我們看一下一些最常見的：
| 驗證器 | 描述 |
|---|---|
| PropTypes.string | 驗證prop是一個字符串 |
| PropTypes.number | 驗證prop是一個數字 |
| PropTypes.bool | 驗證prop是一個布爾值 |
| PropTypes.array | 驗證prop是一個數組 |
| PropTypes.object | 驗證prop是一個對象 |
| PropTypes.func | 驗證prop是一個函數 |
讓我們在以下更複雜的例子中看看這些的使用：
import React from 'react';
import PropTypes from 'prop-types';
function UserProfile({ name, age, isStudent, hobbies, address, onUpdate }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Student: {isStudent ? 'Yes' : 'No'}</p>
<p>Hobbies: {hobbies.join(', ')}</p>
<p>City: {address.city}</p>
<button onClick={onUpdate}>Update Profile</button>
</div>
);
}
UserProfile.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isStudent: PropTypes.bool,
hobbies: PropTypes.array,
address: PropTypes.shape({
city: PropTypes.string,
country: PropTypes.string
}),
onUpdate: PropTypes.func
};
export default UserProfile;讓我們分解一下：
-
name: PropTypes.string.isRequired：這個prop必須是字符串，且是必需的。 -
age: PropTypes.number：這個prop應該是數字，但不是必需的。 -
isStudent: PropTypes.bool：這個prop應該是布爾值。 -
hobbies: PropTypes.array：這個prop應該是數組。 -
address: PropTypes.shape({...})：這個prop應該是具有特定結構的對象。 -
onUpdate: PropTypes.func：這個prop應該是函數。
高級驗證器
PropTypes還提供了更高级的驗證器：
1. PropTypes.oneOf
這個驗證器檢查一個prop是否是特定集合中的一個值：
ColorPicker.propTypes = {
color: PropTypes.oneOf(['red', 'green', 'blue'])
};2. PropTypes.oneOfType
這個驗證器檢查一個prop是否與幾種類型之一匹配：
AgeDisplay.propTypes = {
age: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])
};3. PropTypes.arrayOf
這個驗證器檢查一個prop是否是特定類型的數組：
NumberList.propTypes = {
numbers: PropTypes.arrayOf(PropTypes.number)
};4. PropTypes.objectOf
這個驗證器檢查一個prop是否是具有特定類型值的對象：
Scores.propTypes = {
scores: PropTypes.objectOf(PropTypes.number)
};自定義驗證器
有時候，內置的驗證器不足以滿足需求。這時，自定義驗證器就派上用場了！以下是一個例子：
function AgeValidator(props, propName, componentName) {
if (props[propName] < 0 || props[propName] > 120) {
return new Error(`Invalid prop ${propName} supplied to ${componentName}. Age must be between 0 and 120.`);
}
}
Person.propTypes = {
age: AgeValidator
};這個自定義驗證器確保年齡在0到120之間。
結論
Props驗證就像有一個友好的機器人助手來檢查你的工作。它幫助及早發現錯誤，使代碼更健壯，並為其他開發者（包括將來的你）提供文件！
記住，雖然props驗證在開發過程中非常有用，但在生產環境中會為了性能而移除。所以，不要依賴它進行安全檢查！
希望這個指南能幫助你理解React中的props驗證。繼續練習，繼續編程，最重要的是，繼續享受樂趣！如果你覺得卡住了，只要記住：即使是最複雜的React應用程序也是一個prop一個prop地建造起來的。你可以做到的！
Credits: Image by storyset