React模式：集中式PropTypes

通过集中化PropType避免重复自己 (Avoid repeating yourself by centralizing PropTypes)

There are three popular ways to handle types in React: PropTypes, TypeScript and Flow. This post is about PropTypes, which are currently the most popular.

在React中有三种流行的处理类型的方法： PropTypes ， TypeScript和Flow 。这篇文章是关于PropTypes的，这是目前最受欢迎的。

Since PropTypes provide type warnings at runtime, it’s helpful to be as specific as possible.

由于PropTypes在运行时提供类型警告，因此尽可能具体是有帮助的。

Component accepts an object? Declare the object’s shape.组件接受一个对象？声明对象的形状。
Prop only accepts a specific list of values? Use oneOf.道具只接受特定的值列表？使用oneOf。
Array should contain numbers? Use arrayOf.数组应该包含数字？使用arrayOf。
You can even declare your own types. AirBnB offers many additional PropTypes.

您甚至可以声明自己的类型。 AirBnB提供了许多其他PropType 。

Here’s a PropType example:

这是一个PropType示例：

UserDetails.propTypes = {user: PropTypes.shape({id: PropTypes.number.isRequired,firstName: PropTypes.string.isRequired,lastName: PropTypes.string.isRequired,role: PropTypes.oneOf(['user','admin'])
};

In real apps with large objects, this quickly leads to a lot of code. That’s a problem, because in React, you’ll often pass the same object to multiple components. Repeating these details in multiple component files breaks the DRY principle (don’t repeat yourself). Repeating yourself creates a maintenance problem.

在带有大型对象的实际应用中，这很快会导致大量代码。这是一个问题，因为在React中，您通常会将同一对象传递给多个组件 。在多个组件文件中重复这些详细信息会破坏DRY原理 (请不要重复自己)。重复自己会造成维护问题。

The solution? Centralize your PropTypes.

解决方案？ 集中您的PropTypes 。

这是集中PropType的方法 (Here’s How to Centralize PropTypes)

I prefer centralizing PropTypes in /types/index.js.

我更喜欢将PropTypes集中在/types/index.js中。

I’m using named imports on line 2 to shorten the declarations. ?

我在第2行上使用命名导入来缩短声明。？

And here’s how I use the PropType I declared above:

这就是我使用上面声明的PropType的方式：

// types/index.js
import { shape, number, string, oneOf } from 'prop-types';export const userType = shape({id: number,firstName: string.isRequired,lastName: string.isRequired,company: string,role: oneOf(['user', 'author']),address: shape({id: number.isRequired,street: string.isRequired,street2: string,city: string.isRequired,state: string.isRequired,postal: number.isRequired});
});

I use a named import to get a reference to the exported PropType declaration on line 2. And I put it to use on line 13.

我使用命名导入在第2行上获取对导出的PropType声明的引用，并在第13行上使用它。

Benefits:

好处：

The centralized PropType radically simplifies the component’s PropType declaration. Line 13 just references the centralized PropType, so it’s easy to read.集中式PropType从根本上简化了组件的PropType声明。第13行仅引用集中的PropType，因此很容易阅读。
The centralized type only declares the shape, so you can still mark the prop as required as needed.集中式仅声明形状，因此您仍可以根据需要标记道具。
No more copy/paste. If the object shape changes later, you have a single place to update. ?没有更多的复制/粘贴。如果对象形状稍后更改，则可以在一个位置进行更新。？

Here’s a working example on CodeSandbox.

这是CodeSandbox上的一个工作示例。

额外的功劳：生成您的道具类型 (Extra Credit: Generate Your PropTypes)

Finally, consider writing some custom code to generate your PropType declarations from your server-side code. For example, if your API is written using a strongly typed language like C# or Java, consider generating your PropType declarations as part of your server-side API build process by reading the shape of your server-side classes. This way you don’t have to worry about keeping your client-side PropTypes and your server-side API code in sync. ?

最后，考虑编写一些自定义代码，以根据服务器端代码生成PropType声明。例如，如果您的API是使用诸如C＃或Java之类的强类型语言编写的，则可以考虑通过读取服务器端类的形状来生成PropType声明，作为服务器端API构建过程的一部分。这样，您不必担心保持客户端PropType和服务器端API代码同步。？

Side-note: If you know of a project that does this for any server-side languages, please reply in the comments and I’ll add a link here.

旁注：如果您知道一个针对任何服务器端语言执行此操作的项目，请在评论中进行回复，我将在此处添加一个链接。

Edit: You can convert JSON into PropTypes using transform.now.sh. ?

编辑：您可以使用transform.now.sh将JSON转换为PropTypes。？

摘要 (Summary)

Declare your PropTypes as explicitly as possible, so you know when you’ve made a mistake.尽可能明确地声明您的PropType，以便您知道犯错的时间。
Centralize your PropTypes to avoid repeating yourself.集中化您的PropType，以避免重复您自己。
If you’re working in a strongly typed language on the server, consider generating your PropTypes by reading your server-side code. This assures your PropTypes match your server-side types.如果您在服务器上使用强类型语言，请考虑通过阅读服务器端代码来生成PropType。这样可以确保您的PropTypes与服务器端类型匹配。

寻找更多关于React的信息？ ⚛️ (Looking for More on React? ⚛️)

I’ve authored multiple React and JavaScript courses on Pluralsight (free trial).

我已经在Pluralsight上编写了多个React和JavaScript课程 ( 免费试用 )。

Cory House is the author of multiple courses on JavaScript, React, clean code, .NET, and more on Pluralsight. He is principal consultant at reactjsconsulting.com, a Software Architect at VinSolutions, a Microsoft MVP, and trains software developers internationally on software practices like front-end development and clean coding. Cory tweets about JavaScript and front-end development on Twitter as @housecor.

Cory House是JavaScript，React，干净代码，.NET等课程的多本课程的作者，并且还提供了有关Pluralsight的更多课程。他是reactjsconsulting.com的首席顾问， VinSolutions的软件架构师，Microsoft MVP，并且在软件开发方面对国际软件开发人员进行了培训，例如前端开发和简洁编码。 Cory在Twitter上以@housecor表示关于JavaScript和前端开发的推文。

翻译自: https://www.freecodecamp.org/news/react-pattern-centralized-proptypes-f981ff672f3b/