你不是我的原型

Have you ever run into issues because of passing down the wrong data type? I have. Quite recently. Luckily, PropTypes was there to save me.

您是否因为传递错误的数据类型而遇到问题？ 我有。 最近。 幸运的是，PropTypes在那里救了我。

Props are the backbone of passing read-only attributes from the parent component to the child component in React. Passing the wrong data type may give us headaches as we’ll need to spend time debugging why the component is behaving unexpectedly.

道具是在React中将只读属性从父组件传递到子组件的基础。 传递错误的数据类型可能使我们头疼，因为我们需要花时间调试组件异常运行的原因。

Though we can go for JavaScript extensions like TypeScript or Flow for type-checking, React provides a built-in library: PropTypes.

尽管我们可以使用TypeScript或Flow之类JavaScript扩展来进行类型检查，但是React提供了一个内置库：PropTypes。

Using PropTypes, we can make sure that a component receives the type of props that it expects.

使用PropTypes，我们可以确保组件接收到期望的道具类型。

安装 (Installation)

PropTypes was a utility as part of the React package, and it could be accessed with React.PropTypes before React 15.5.0.

PropTypes是React软件包的一部分，可以在React 15.5.0之前使用React.PropTypes进行访问。

In the newer versions of React, this utility has become a separate package called prop-types. So, we’ll need to add it to our project as a dependency like this:

在较新版本的React中，此实用程序已成为称为prop-types的单独软件包。 因此，我们需要将其作为依赖项添加到我们的项目中，如下所示：

npm install prop-types

用法 (Usage)

We can import it from the prop-types package as follows to use it in our project:

我们可以按照以下方式从prop-types包中导入它，以在项目中使用它：

import PropTypes from ‘prop-types’

Here is a code snippet from our function, Pagination, that we later will need:

这是我们的函数分页的代码片段，稍后我们将需要：

const { itemsCount, pageSize, currentPage } = props;

We want to set the propTypes on our component. propTypes should be an object that accepts key-value pairs, where the key represents the name of the prop, and the value represents the type of prop that is available to the component.

我们想在组件上设置propTypes。 propTypes应该是一个接受键-值对的对象，其中键代表prop的名称，而值代表组件可用的prop类型。

Pagination.propTypes={
//prop type definition goes here
}

After that, we can include the variables that we have in our destructuring above in the propTypes and specify their data types:

之后，我们可以在propTypes中包含以上在结构分解中拥有的变量，并指定其数据类型：

Pagination.propTypes = {itemsCount: PropTypes.number,pageSize: PropTypes.number,currentPage: PropTypes.number};

An error will be raised in the console when an invalid prop is passed to the component:

将无效的prop传递给组件时，将在控制台中引发错误：

Warning: Failed prop type: Invalid prop `currentPage` of type `string` supplied to `Pagination`, expected `number`.

是必须的 (isRequired)

We can also chain isRequired to the prop validator to make sure that the prop is always provided.

我们还可以将isRequired到道具验证器，以确保始终提供道具。

Pagination.propTypes = {itemsCount: PropTypes.number.isRequired,pageSize: PropTypes.number,currentPage: PropTypes.number};

If itemsCount is not passed, a warning will be displayed:

如果未通过itemsCount ，将显示警告：

Warning: Failed prop type: The prop `itemsCount` is marked as required in `Pagination`, but its value is `undefined`.

This way, we can ensure that the data will always be passed.

这样，我们可以确保始终传递数据。

defaultProps (defaultProps)

Setting a default value is another cool feature PropTypes has. Doing that, we’ll know something gets passed even when a prop is missing:

设置默认值是PropTypes的另一个很酷的功能。 这样一来，即使缺少道具，我们也会知道一些事情通过了：

Pagination.defaultProps = {itemsCount: 4,pageSize: PropTypes.number,currentPage: PropTypes.number};

This way, the prop itemCount will have a value no matter what.

这样，prop itemItem无论如何都会有一个值。

结论 (Conclusion)

We went over some of the features PropTypes has, such as isRequired, defaultProps, and some prop validators; you can visit here for detailed information.

我们介绍了PropTypes具有的一些功能，例如isRequired ， defaultProps和一些prop验证器； 您可以在这里访问以获取详细信息。

Feel free to leave comments! 👩🏻‍💻

随时发表评论！ ‍💻

翻译自: https://medium.com/@melikekilic/youre-not-my-type-proptypes-9d7bcc73db14