使用 React.PropType 处理类型

随着编译(er...transpilation)成为后ES5的常态标准,JS基于JS的开发景观 - 照顾像Babel这样的工具 - 有越来越多的感觉,也许是时候放弃我们的公平语言的动态和强制的方式,以有利于更明智的,静态的做事方式。

这导致诸如当然,但我从哪里开始?这样的问题。

最大的营地是TypeScript(微软)和Flow(Facebook),但如果你在React中工作,你已经在你的代码库中有一个很棒的,低维护的替代方案,很容易实现,就像学习一样。

1import React, { PropTypes } from 'react';

向 React.PropTypes打招呼,这是一个开发者友好的工具,用于声明和检查类型,当然,它可以轻松地处理所有原始词( array, bool, func, number, object, string, symbol):

 1function Nest({name}) {
 2  return (
 3    <div>
 4      We called it {name}.
 5    </div>
 6  );
 7}
 8
 9Nest.propTypes = {
10  name: PropTypes.string,
11}
12
13export default Nest;

但是,帽子底下也有足够的深度来管理一些相当复杂的验证:

1Nest.propTypes = {
2  name: PropTypes.string,
3  eggs: PropTypes.shape({
4    species: PropTypes.string,
5    femaleToMale: PropTypes.arrayOf(PropTypes.number),
6    hobbies: PropTypes.oneOf(['swimming', 'stalking']),
7  }),
8}

在 All-in 中,您可以获得九种额外的类型来投掷您的奖励:

所有 DOM 和 React 元素需求的 节点 和 元素
用于挖掘原型的 InstanceOf * 已知潜在值列表的 oneOfType * 已知潜在类型列表的 arrayOf' 和 objectOf' 用于组合和由单一类型组成的对象的 形状' 用于特定格式的对象* 和 任何' 用于当您真的不想检查类型

此外,您可以将isRequired附加到任何 PropType 声明中,以增加硬度。

1hobbies: PropTypes.oneOf(['swimming', 'stalking']).isRequired

需要注意的是,PropType 检查在生产中被禁用,并且在开发模式中仅作为指导手指存在。

A missing required prop warning in the Chrome console

你现在是一个类型的检查专家,不要滥用这个新的权力。