本文共 4709 字,大约阅读时间需要 15 分钟。
There are three popular ways to handle types in React: , and . This post is about PropTypes, which are currently the most popular.
在React中有三种流行的处理类型的方法: , 和 。 这篇文章是关于PropTypes的,这是目前最受欢迎的。
Since PropTypes provide type warnings at runtime, it’s helpful to be as specific as possible.
由于PropTypes在运行时提供类型警告,因此尽可能具体是有帮助的。
You can even declare your own types. .
您甚至可以声明自己的类型。 。
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 (don’t repeat yourself). Repeating yourself creates a maintenance problem.
在带有大型对象的实际应用中,这很快会导致大量代码。 这是一个问题,因为在React中,您通常会将同一对象传递给多个组件 。 在多个组件文件中重复这些详细信息会破坏 (请不要重复自己)。 重复自己会造成维护问题。
The solution? Centralize your PropTypes.
解决方案? 集中您的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.jsimport { 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:
好处 :
Here’s a .
这是的一个 。
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 . ?
编辑 :您可以使用将JSON转换为PropTypes。 ?
I’ve authored on Pluralsight ().
我已经在Pluralsight上编写了 ( )。
is the author of . He is principal consultant at , 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 .
是的的作者 。 他是首席顾问, 的软件架构师,Microsoft MVP,并且在软件开发方面对国际软件开发人员进行了培训,例如前端开发和简洁编码。 Cory在Twitter上以关于JavaScript和前端开发的推 。
翻译自:
转载地址:http://gwyzd.baihongyu.com/