ReactJS - PropTypes：初學者的指南

Hello, 未來的React開發者！今天，我們將踏上一段令人興奮的旅程，進入PropTypes的世界。別擔心如果你是編程新手——我將成為你的友好指導，我們將一步步前進。在本教程結束時，你將對PropTypes有堅實的了解，並明白它們在React開發中為何如此重要。

PropTypes是什麼？

想像你正在建造一個紙牌房子。每張紙牌都需要放置得恰到好處，否則整個結構可能會倒塌。在React中，我們的组件就像那些紙牌，而PropTypes是我們確保每個部分都能完美契合的方法。

PropTypes是React中的一個功能，它們幫助我們檢查傳遞給我們组件的props（屬性的簡稱）類型。它們就像一個友好的檢查站，確保在我們應用程序中流動數據正是我們期望的。

我們為什麼需要PropTypes？

1. 及早發現錯誤：PropTypes幫我們在問題變成大問題之前發現錯誤。
2. 自文檔化代碼：它們使我們的代碼對於我們自己和其他開發者更容易理解。
3. 改善開發體驗：PropTypes在控制台中提供有用的警告信息。

讓我們來看一些代碼示例，看看PropTypes是如何工作的！

開始使用PropTypes

首先，我們需要將PropTypes導入我們的React组件：

import React from 'react';
import PropTypes from 'prop-types';

現在，讓我們創建一個簡單的组件來使用：

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

這個Greeting组件接受一個name prop並顯示一個友好的問候信息。但如果有人忘記傳遞一個name，或者傳遞了一個數字呢？這就是PropTypes出場的時候！

基本PropTypes用法

讓我們在Greeting组件中添加PropTypes：

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

Greeting.propTypes = {
name: PropTypes.string.isRequired
};

這是我們告訴React的：

• name prop應該是一個字符串（PropTypes.string）
• 它是必填的（isRequired）

如果有人嘗試使用我們的Greeting组件而沒有傳遞name prop，或者傳遞了一個非字符串的name，他們將在控制台中看到一個警告。這就像有一個友好的機器人助手在監視錯誤！

常見PropTypes

讓我們探討一些最常見的PropTypes：

PropType	描述
PropTypes.string	預期一個字符串
PropTypes.number	預期一個數字
PropTypes.bool	預期一個布爾值
PropTypes.array	預期一個數組
PropTypes.object	預期一個對象
PropTypes.func	預期一個函數

示例：用戶個人資料组件

讓我們創建一個更複雜的组件來展示這些PropTypes：

function UserProfile({ name, age, isStudent, hobbies, address, onUpdate }) {
return (
<div>
<h2>{name}</h2>
<p>年齡: {age}</p>
<p>{isStudent ? '是一名學生' : '不是學生'}</p>
<h3>愛好：</h3>
<ul>
{hobbies.map((hobby, index) => (
<li key={index}>{hobby}</li>
))}
</ul>
<p>城市: {address.city}</p>
<button onClick={onUpdate}>更新個人資料</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
};

在這個示例中，我們使用各種PropTypes來確保我們的UserProfile组件接收到正確的數據類型。讓我們分解一下：

• name：一個必填的字符串
• age：一個可選的數字
• isStudent：一個可選的布爾值
• hobbies：一個可選的數組
• address：一個可選的對象，具有特定的結構
• onUpdate：一個可選的函數

高級PropTypes

現在我們已經覆蓋了基本知識，讓我們探索一些更高级的PropTypes功能。

自定義驗證器

有時，內置的PropTypes不足以滿足我們的需求。這時，我們可以創建自己的自定義驗證器：

function AgeRange({ age }) {
return <p>你的年齡: {age}</p>;
}

AgeRange.propTypes = {
age: function(props, propName, componentName) {
if (props[propName] < 0 || props[propName] > 120) {
return new Error(`無效的屬性 ${propName} 提供給 ${componentName}。年齡必須在0到120之間。`);
}
}
};

這個自定義驗證器確保age屬性介於0到120之間。如果不是，它會拋出一個有用的錯誤信息。

集合的PropTypes

當使用數組或對象時，我們通常想指定它們内容的類型：

function BookList({ books }) {
return (
<ul>
{books.map((book, index) => (
<li key={index}>{book.title} 作者 {book.author}</li>
))}
</ul>
);
}

BookList.propTypes = {
books: PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string.isRequired,
author: PropTypes.string.isRequired
}))
};

這個示例確保books是一個對象數組，每個對象都有title和author字符串屬性。

使用PropTypes的最佳實踐

1. 總是為接收props的组件使用PropTypes：這是一個在React旅程早期養成的良好習慣。
2. 盡可能具體：而不是使用PropTypes.object，試著定義你的對象結構。
3. 對於必不可少的props使用.isRequired：這有助於防止由於缺少數據而導致的錯誤。
4. 為更复杂的驗證組合PropTypes：你可以使用PropTypes.oneOfType來允許一個屬性有多種類型。

結論

恭喜你！你剛剛踏出了在React中探索PropTypes的第一步。記住，PropTypes就像你可靠的副手，總是在那裡幫助你捕捉潛在的問題並使你的代碼更加健壯。

隨著你繼續你的React旅程，你會發現PropTypes會變得習以為常。它們是創建可靠、可維護的React應用程序的有價值工具。繼續練習，保持好奇心，並且快樂編程！

Credits: Image by storyset