React Pattern: Tập trung PropTypes

Tránh lặp lại chính bản thân bằng cách tập trung PropTypes

Có ba cách phổ biến để xử lý các loại trong React: PropTypes, TypeScript và Flow. Bài này sẽ viết về PropTypes, hiện đang là loại phổ biến nhất.

Từ khi PropTypes cung cấp các cảnh báo trong thời gian chạy, nó rất hữu ích vì càng cụ thể 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.

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 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 các 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 (
    <div>
      <h1>{user.firstName} {user.lastName}</h1>
    </div>
  )
}

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:

1. 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.
2. 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.
3. 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 một số code tùy chỉnh để tạo các khai báo PropType của bạn từ code phía máy chủ của bạn. Ví dụ, nếu API của bạn được viết bằng ngôn ngữ đánh máy mạnh như C # hay Java, hãy xem xét tạo các khai báo PropType của bạn như là một phần của quá trình xây dựng API phía máy chủ của bạn bằng cách đọc hình dạng các lớp phía máy chủ của bạn. Bằng cách này bạn không phải lo lắng về việc đồng bộ hóa các PropTypes phía máy khách và API code phía máy chủ 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

1. 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.
2. Tập trung PropTypes để tránh lặp lại.
3. Nếu bạn đang làm việc với một ngôn ngữ đánh máy mạnh mẽ trên máy chủ, hãy xem xét việc tạo ra các tham số PropTypes của bạn bằng cách đọc code từ phía máy chủ. Điều này đảm bảo PropTypes của bạn khớp với các kiểu máy chủ.