Có ba cách phổ cập để giải quyết và xử lý những loại trong React : PropTypes, TypeScript và Flow. Bài này sẽ viết về PropTypes, hiện đang là loại thông dụng nhất .
Từ khi PropTypes phân phối những cảnh báo nhắc nhở trong thời hạn chạy, nó rất có ích vì càng đơn cử hoàn toàn có thể :
Component chấp nhận một đối tượng? Khai báo hình dạng của đối tượng.
Prop chỉ chấp nhận một danh sách cụ thể của các giá trị? Sử dụng một trong số đó .
Array nên chứa các con số? Sử dụng một trong số các array.
Bạn thậm chí có thể khai báo các loại của riêng bạn. AirBnB cung cấp nhiều PropTypes bổ sung.
Bạn đang đọc: React Pattern: Tập trung PropTypes
UserDetails.propTypes = {
user: PropTypes.shape({
id: PropTypes.number.isRequired,
firstName: PropTypes.string.isRequired,
lastName: PropTypes.string.isRequired,
role: PropTypes.oneOf(['user','admin'])
};
Ví dụ về khai báo PropType
Trong các ứng dụng thực với các đối tượng lớn, điều này nhanh dẫn đến rất nhiều code. Đó là một vấn đề, bởi vì trong React, bạn thường sẽ vượt qua cùng một đối tượng tới nhiều thành phần. Việc lặp lại các chi tiết này trong nhiều file component sẽ phá vỡ nguyên tắc DRY (không lặp lại chính mình). Lặp đi lặp lại chính nó tạo ra vấn đề bảo trì.
Giải quyết bằng cách nào ? Tập trung vào PropTypes .
Đây là cách tích hợp PropTypes
Cá nhân tôi thích tập trung chuyên sâu PropTypes trong / types / index.js .
// 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
});
});
Ở trên tôi đang dùng tên đưa trên dòng 2 để rút ngắn những tờ khai .
Và đây là cách tôi sử dụng PropType đã đưa ra ở trên :
import React from 'react';
import {userType} from './types';
function User({ user }) {
return (
{user.firstName} {user.lastName}
)
}
User.propTypes = {
user: userType.isRequired
};
export default User;
Tôi nhập vào tên để lấy một tham chiếu đến khai báo PropType được xuất ra trên dòng 2 và đặt nó vào dòng 13 .
Benefits:
- PropType tập trung hoàn toàn đơn giản hóa việc khai báo PropType của component. Dòng 13 chỉ đề cập đến PropType tập trung, vì vậy nó rất dễ đọc.
- Kiểu tập trung chỉ khai báo hình dạng, vì vậy bạn vẫn có thể đánh dấu cột theo yêu cầu khi cần.
- Không có thêm bản sao / dán. Nếu hình dạng đối tượng thay đổi sau đó, bạn sẽ có cập nhật.
Đây là một ví dụ làm việc trên CodeSandbox.
Tín dụng bổ sung: Tạo PropTypes của bạn
Cuối cùng, hãy xem xét viết 1 số ít code tùy chỉnh để tạo những khai báo PropType của bạn từ code phía sever của bạn. Ví dụ, nếu API của bạn được viết bằng ngôn từ đánh máy mạnh như C # hay Java, hãy xem xét tạo những khai báo PropType của bạn như thể một phần của quy trình kiến thiết xây dựng API phía sever của bạn bằng cách đọc hình dạng những lớp phía sever của bạn. Bằng cách này bạn không phải lo ngại về việc đồng nhất hóa những PropTypes phía máy khách và API code phía sever của bạn .
Lưu ý: Nếu bạn biết về một dự án thực hiện việc này với bất kỳ ngôn ngữ nào phía máy chủ, vui lòng trả lời trong các nhận xét và tôi sẽ thêm một liên kết ở đây.
Chỉnh sửa: Bạn có thể chuyển đổi JSON thành PropTypes bằng cách sử dụng transform.now.
Tóm lại
- Khai báo PropTypes một cách rõ ràng nhất có thể, vì vậy bạn sẽ biết khi nào mắc phải lỗi.
-
Tập trung PropTypes để tránh lặp lại .
Nguồn: FreecodecampTham khảo thêm các vị trí tuyển dụng React lương cao
Source: kubet
Category: Tải Phầm Mềm
Leave a Reply