الفرق بين المراجعتين ل"React/typechecking with proptypes"
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التحقق من الأنواع باستخدام <code>PropTypes</code>}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التحقق من الأنواع باستخدام <code>PropTypes</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:التحقق من الأنواع باستخدام <code>PropTypes</code>}}</noinclude> | ||
| + | '''ملاحظة:''' انتقلت <code>React.PropTypes</code> إلى حزمة مختلفة منذ إصدار React v15.5. من فضلك استخدم المكتبة <code>[https://www.npmjs.com/package/prop-types prop-types]</code> بدلًا من ذلك. نُزوِّدك [https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes بشيفرة جاهزة] لأتمتة هذه العملية. | ||
| + | |||
| + | عندما ينمو تطبيقك قد تلتقط العديد من الأخطاء باستخدام التحقق من الأنواع. بإمكانك استخدام إضافات JavaScript مثل [https://flow.org/ Flow] أو [https://www.typescriptlang.org/ TypeScript] للتحقّق من كامل تطبيقك، ولكن حتى ولو لم تستخدمها، تمتلك React بعض القدرات المُضمَّنة للتحقّق من الأنواع. لإجراء التحقّق من الأنواع على خاصيّات المُكوّنات بإمكانك تعيين الخاصية <code>propTypes</code> إليها:<syntaxhighlight lang="javascript"> | ||
| + | import PropTypes from 'prop-types'; | ||
| + | |||
| + | class Greeting extends React.Component { | ||
| + | render() { | ||
| + | return ( | ||
| + | <h1>أهلًا {this.props.name}</h1> | ||
| + | ); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | Greeting.propTypes = { | ||
| + | name: PropTypes.string | ||
| + | }; | ||
| + | |||
| + | </syntaxhighlight>تستخرج <code>PropTypes</code> مجموعة من أدوات التحقّق لتحرص على أن تكون البيانات المستقبلة صحيحة. سنستخدم في هذا المثال <code>PropTypes.string</code>. عندما نعطي قيمة غير صحيحة للخاصية سيظهر خطأ في نافذة الكونسول. ولأسباب تتعلق بالأداء لا تُستخدَم <code>propTypes</code> إلا في وضع التطوير. | ||
| + | |||
| + | == <code>PropTypes</code> == | ||
| + | سنُوثِّق في هذا المثال أدوات التحقّق المختلفة الموجودة: | ||
مراجعة 18:20، 1 أغسطس 2018
ملاحظة: انتقلت 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
سنُوثِّق في هذا المثال أدوات التحقّق المختلفة الموجودة: