通过集中化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/