详细指南｜使用JavaScript中的第三方库PropTypes

电报联系方式

PropTypes基本应用

PropTypes 提供了一种方式，让你定义组件属性的期望类型，数组未能接收到不符合预期的属性。通过考虑不同的数据类型和结构可以探索一些有趣的 PropTypes 用法。

1. 标准类型检查

import PropTypes from ‘prop-types’;

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

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

上述代码为Greeting组件的name属性定义了字符串类型。PropTypes确保当此属性非字符串时能及时发现并提醒。

2. 必需属性检查

Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
};

属性后接.isRequired修饰符表示该属性为必传。未传入必需属性，或类型不符，控制台会显示警告。

3. 数组和对象的元素类型指定

Collection.propTypes = {
items: PropTypes.arrayOf(PropTypes.number),
details: PropTypes.objectOf(PropTypes.string)
};

使用 PropTypes 中，我们可以显式地定义数组和对象的元素类型。在这个场景中，我们通过这两个 PropTypes 来规定是由数字结构的数组，而不是arrayOf由字符串属性结构的对象。objectOfitemsdetails

4. 特定结构的对象检查

User.propTypes = {
info: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number,
email: PropTypes.string
})
};

通过PropTypes.shape指定对象的确切结构，如info对象包含有特定类型的name, age, 和email属性。

5. 单一类型或多种类型中的一个

Component.propTypes = {
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Date)
])
};

PropTypes.oneOfType确保value属性是列举类型中的一种，增加了属性的灵活性。

6. 特定类的实例

Threshold.propTypes = {
comparer: PropTypes.instanceOf(ComparerClass)
};

PropTypes.instanceOf用来保证对应属性是特定类的实例，这里comparer必须是ComparerClass实例。

7. 任何可被渲染的内容

MessageBox.propTypes = {
message: PropTypes.node
};

PropTypes.node接受任何可被渲染的内容，包括数字、字符串、React元素等。

8. 枚举类型

Alert.propTypes = {
type: PropTypes.oneOf([‘info’, ‘warning’, ‘error’])
};

PropTypes.oneOf定义枚举类型，控制属性的可能值在限定的范围内。

9. 自定义校验器

Rating.propTypes = {
stars: function(props, propName, componentName) {
if (!/^[0-5]$/.test(props[propName])) {
return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Validation failed.`);
}
}
};

如果内建的校验器不满足需求，可以定义函数形式的校验器，如stars属性需要是0到5的数字。

10.propTypes 默认值

Component.defaultProps = {
name: ‘John Doe’
};

Component.propTypes = {
name: PropTypes.string
};

通过Component.defaultProps设置属性的默认值，此时即使外部未传入name属性，组件亦可获得默认值。

进阶PropTypes使用

11.定制嵌套形状的对象

Document.propTypes = {
file: PropTypes.shape({
name: PropTypes.string,
property: PropTypes.shape({
type: PropTypes.oneOf([‘PDF’, ‘DOC’]),
size: PropTypes.number.isRequired
}).isRequired
})
};

嵌套使用PropTypes.shape可对对象内更深层的结构进行校验。上例中file属性具有name和property两个属性。

12. 数组中包含特定结构的对象

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

PropTypes.arrayOf配合PropTypes.shape适用于数组中的每个对象遵循特定的结构。

13. 允许某些特定值为null

Profile.propTypes = {
bio: PropTypes.string,
age: PropTypes.number,
school: PropTypes.oneOfType([
PropTypes.string,
PropTypes.oneOf([null])
])
};

通过结合PropTypes.oneOfType和PropTypes.oneOf，允许school属性为空。

14. 自定义数组或对象类型的结构

Palette.propTypes = {
colors: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/^#[0-9A-F]{6}$/i.test(propValue[key])) {
return new Error(
`Invalid prop \`${propFullName}\` supplied to \`${componentName}\`. ` +
`Invalid color format. Validation failed.`
);
}
})
};

对于复杂的结构，如需要校验的颜色码，可自定义方法校验数组中的每个值。

开发联系：DEXDAO