ReactJS - Props Validation: A Beginner's Guide

你好，未来的React开发者们！今天，我们将深入了解React中最重要的概念之一：Props验证。别担心如果你是编程新手；我会一步步引导你，就像我过去几年里教过无数学生一样。让我们一起开始这段激动人心的旅程！

ReactJS - props Validation

Props是什么？

在我们跳到验证之前，先快速回顾一下props是什么。在React中，props（属性的简称）是一种从父组件向子组件传递数据的方式。可以想象成你传递给函数的参数。它们是只读的，并能帮助你使组件更加动态和可复用。

为什么验证Props？

想象一下你在建造一座房子。你肯定不希望有人不小心用纸代替砖头，对吧？同样，在React中，我们希望确保传递给组件的数据类型是正确的。这就是props验证的用武之地。

Props验证可以帮助我们： 1.及早发现错误 2.使代码更具可读性 3.为其他开发者充当文档

现在，让我们深入了解如何在React中实现props验证！

PropTypes

React有一个内置的特性，叫做PropTypes，它允许我们验证组件接收到的props。这就像在组件入口有一个严格但友好的门卫，检查每个人（每个props）是否具备进入的资格。

安装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	验证该props是字符串
PropTypes.number	验证该props是数字
PropTypes.bool	验证该props是布尔值
PropTypes.array	验证该props是数组
PropTypes.object	验证该props是对象
PropTypes.func	验证该props是函数

让我们在一个更复杂的例子中看看它们的使用：

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：这个props必须是一个字符串，并且是必需的。
age: PropTypes.number：这个props应该是数字，但不是必需的。
isStudent: PropTypes.bool：这个props应该是布尔值。
hobbies: PropTypes.array：这个props应该是数组。
address: PropTypes.shape({...})：这个props应该是具有特定形状的对象。
onUpdate: PropTypes.func：这个props应该是函数。

高级验证器

PropTypes还提供了更高级的验证器：

1. PropTypes.oneOf

这个验证器检查一个props是否是特定集合中的值：

ColorPicker.propTypes = {
color: PropTypes.oneOf(['red', 'green', 'blue'])
};

2. PropTypes.oneOfType

这个验证器检查一个props是否符合几种类型之一：

AgeDisplay.propTypes = {
age: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])
};

3. PropTypes.arrayOf

这个验证器检查一个props是否是特定类型的数组：

NumberList.propTypes = {
numbers: PropTypes.arrayOf(PropTypes.number)
};

4. PropTypes.objectOf

这个验证器检查一个props是否是具有特定类型值的对象：

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开始构建的。你可以做到的！

Credits: Image by storyset