التحقق من الأنواع باستخدام PropTypes

ملاحظة: انتقلت React.PropTypes إلى حزمة مختلفة منذ إصدار React v15.5. من فضلك استخدم المكتبة prop-types بدلًا من ذلك. نُزوِّدك بشيفرة جاهزة لأتمتة هذه العملية.

عندما ينمو تطبيقك قد تلتقط العديد من الأخطاء باستخدام التحقق من الأنواع. بإمكانك استخدام إضافات JavaScript مثل Flow أو TypeScript للتحقّق من كامل تطبيقك، ولكن حتى ولو لم تستخدمها، تمتلك React بعض القدرات المُضمَّنة للتحقّق من الأنواع. لإجراء التحقّق من الأنواع على خاصيّات المُكوّنات بإمكانك تعيين الخاصية propTypes إليها:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>أهلًا {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

تستخرج PropTypes مجموعة من أدوات التحقّق لتحرص على أن تكون البيانات المستقبلة صحيحة. سنستخدم في هذا المثال PropTypes.string. عندما نعطي قيمة غير صحيحة للخاصية سيظهر خطأ في نافذة الكونسول. ولأسباب تتعلق بالأداء لا تُستخدَم propTypes إلا في وضع التطوير.

PropTypes

سنُوثِّق في هذا المثال أدوات التحقّق المختلفة الموجودة: