انتقل إلى المحتوى
Numio

تحويل JSON إلى React PropTypes — Numio

يحوّل كائن props نموذجيًا بصيغة JSON إلى كائن propTypes في React. تصبح الكائنات المتداخلة PropTypes.shape، ومصفوفات السلاسل النصية PropTypes.arrayOf(PropTypes.string)، وقيم null PropTypes.any.

إضافة فحوص props وقت التشغيل إلى مكوّن React مكتوب بـ JavaScript انطلاقًا من عيّنة من البيانات التي يستقبلها.

JSON

PropTypes

متى تستخدمها

  • إضافة فحوص props وقت التشغيل إلى مكوّن React مكتوب بـ JavaScript انطلاقًا من عيّنة من البيانات التي يستقبلها.
  • توثيق props مكوّن صنفي (class component) قديم باستخدام بيانات أمثلة معروفة.

طريقة الاستخدام

  1. الصق كائن JSON من props نموذجية؛ تُدمج المصفوفة الجذرية من الكائنات أولًا في كائن واحد.
  2. اقرأ كتلة const propTypes = {...}؛ تظهر الكائنات المتداخلة على شكل PropTypes.shape({...}).
  3. انسخها، وأضف import PropTypes from "prop-types"، وأسندها إلى MyComponent.propTypes، وأضف .isRequired حيث يلزم.

Props بصيغة JSON

{
  "title": "Release notes",
  "count": 3,
  "visible": true,
  "tags": ["web", "react"],
  "author": { "name": "Ada", "avatarUrl": "https://example.com/a.png" },
  "links": [
    { "label": "Docs" },
    { "label": "Repo", "url": "https://example.com/repo" }
  ],
  "badge": null
}

React PropTypes

const propTypes = {
  title: PropTypes.string,
  count: PropTypes.number,
  visible: PropTypes.bool,
  tags: PropTypes.arrayOf(PropTypes.string),
  author: PropTypes.shape({
    name: PropTypes.string,
    avatarUrl: PropTypes.string,
  }),
  links: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      url: PropTypes.string,
    }),
  ),
  badge: PropTypes.any,
}

التفاصيل والقيود

يعمل في Web Worker داخل المتصفح بمولّد الموقع الخاص، ثم Prettier؛ بلا أي طلب إلى الخادم.

لا تُعلَّم أي prop بـ .isRequired، ولا يمكن استنتاج الدوال أو العناصر أو التعدادات من JSON.

في مصفوفة الكائنات تُدمج كل العناصر في PropTypes.shape واحد، فتُضمَّن المفاتيح التي لا تظهر إلا في عناصر لاحقة.

تصبح المصفوفات مختلطة الأنواع PropTypes.arrayOf(PropTypes.oneOfType([...]))، والمصفوفات المتداخلة arrayOf(arrayOf(...))، والمصفوفات الفارغة PropTypes.array.

FAQ

هل يمكنني لصق مصفوفة JSON؟

نعم، إذا كانت تحتوي على كائنات: تُدمج العناصر في كائن واحد، فيسرد الناتج كل مفتاح يظهر في أي عنصر. أما المصفوفة الجذرية من السلاسل النصية أو الأرقام فتُرفض.

ما نوع قيم null؟

PropTypes.any، لأن null لا تقول شيئًا عن النوع الحقيقي. استبدلها بالمتحقق المتوقع، مثل PropTypes.string.

هل لا تزال PropTypes تعمل في React 19؟

لا. أزال React 19 فحص propTypes، لذا تُتجاهل التعريفات بصمت. استخدم هذا الناتج مع React 18 أو أقدم، أو انتقل إلى أنواع TypeScript.

المواصفات والمراجع