إتقان الدعائم وأنواع PropTypes في التفاعل

هل تربكك الدعائم وأنواع PropTypes؟ انت لست وحدك. سأقوم بإرشادك خلال كل شيء عن الدعائم وأنواع PropTypes. يمكنهم تسهيل حياتك بشكل ملحوظ عند تطوير تطبيقات React. سيقدم لك هذا البرنامج التعليمي تفاصيل حول الدعائم ، وتمرير الدعائم والوصول إليها ، وتمرير المعلومات إلى أي مكون باستخدام الدعائم.

يتضمن بناء تطبيقات React تقسيم واجهة المستخدم إلى عدة مكونات ، مما يعني أننا سنحتاج إلى تمرير البيانات من مكون إلى آخر. تعتبر الدعائم آلية مهمة لتمرير المعلومات بين مكونات React ، وسننظر فيها بتفصيل كبير. قد تكون هذه المقالة غير مكتملة دون النظر في PropTypes ، لأنها تضمن أن المكونات تستخدم نوع البيانات الصحيح وتمرير البيانات الصحيحة.

إنها دائمًا ممارسة جيدة للتحقق من صحة البيانات التي نحصل عليها كدعامات باستخدام PropTypes. ستتعلم أيضًا عن تكامل PropTypes في React والتحقق من الكتابة باستخدام PropTypes واستخدام العناصر الافتراضية. في نهاية هذا البرنامج التعليمي ، سوف تفهم كيفية استخدام PropTypes و PropTypes بشكل فعال. من المهم أن يكون لديك بالفعل معرفة أساسية بكيفية عمل React.

فهم الدعائم

يسمح لنا React بتمرير المعلومات إلى المكونات باستخدام أشياء تسمى الدعائم (اختصار للخصائص). نظرًا لأن React يتألف من عدة مكونات ، فإن الخاصيات تجعل من الممكن مشاركة نفس البيانات عبر المكونات التي تحتاجها. يستخدم تدفق البيانات أحادي الاتجاه (مكونات من الأصل إلى الطفل). ومع ذلك ، مع وظيفة رد الاتصال ، من الممكن تمرير الخاصيات مرة أخرى من طفل إلى مكون رئيسي.

يمكن أن تأتي هذه البيانات بأشكال مختلفة: أرقام ، سلاسل ، مصفوفات ، وظائف ، كائنات ، إلخ. يمكننا تمرير الخاصيات إلى أي مكون ، تمامًا كما يمكننا إعلان السمات في أي علامة HTML. ألق نظرة على الكود أدناه:

 <PostList posts={postsList} />

في هذا المقتطف ، نقوم بتمرير PostList posts هذه الخاصية لها قيمة {postsList} . دعونا نقسم كيفية الوصول إلى البيانات وتمريرها.

دعائم التمرير والوصول

لجعل هذا البرنامج التعليمي ممتعًا ، دعنا ننشئ تطبيقًا يعرض قائمة بأسماء المستخدمين ومنشوراتهم. يظهر التطبيق التجريبي أدناه:

يتألف التطبيق من مجموعات من المكونات: مكوِّن App ومكوِّن PostList ومكوِّن Post .

ستتطلب قائمة المنشورات بيانات مثل content name المستخدم. يمكننا بناء البيانات على النحو التالي:

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

بعد ذلك ، نحتاج إلى مكون App لسحب البيانات ، وإليك البنية الأساسية لهذا المكون:

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

هنا ، نقوم بتمرير مجموعة من المنشورات كدعم إلى PostList (والتي سننشئها بعد قليل). سيصل المكون الرئيسي ، PostList ، إلى البيانات الموجودة في postsList ، والتي سيتم تمريرها كعناصر posts إلى المكون الفرعي ( Post ). إذا كنت تتذكر ، فإن تطبيقنا يتكون من ثلاثة مكونات ، سنقوم بإنشائها أثناء تقدمنا.

لنقم بإنشاء PostList :

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

سيتلقى مكون PostList posts خاص به. سيقوم بعد ذلك بالمرور عبر خاصية posts ، this.props.posts ، لإرجاع كل عنصر منشور كمكوِّن Post (والذي سنقوم بتصميمه لاحقًا). لاحظ أيضًا استخدام key في المقتطف أعلاه. بالنسبة لأولئك الجدد على React ، المفتاح هو معرف فريد يتم تعيينه لكل عنصر في قائمتنا ، مما يمكننا من التمييز بين العناصر. في هذه الحالة ، يكون المفتاح هو id كل منشور. لا توجد فرصة لوجود عنصرين لهما نفس id ، لذا فهي جزء جيد من البيانات لاستخدامها لهذا الغرض.

في غضون ذلك ، يتم تمرير الخصائص المتبقية كعناصر خاصة إلى مكون Post ( <Post {...post} /> ).

لذلك ، دعونا ننشئ مكون Post ونستفيد من الدعائم فيه:

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

نحن نبني مكون Post كمكون وظيفي ، بدلاً من تعريفه كمكون فئة كما فعلنا لمكون PostList . لقد فعلت ذلك لأوضح لك كيفية الوصول إلى الخاصيات في مكون وظيفي ، مقارنةً بكيفية الوصول إليها في مكون فئة باستخدام this.props . نظرًا لأن هذا مكون وظيفي ، يمكننا الوصول إلى القيم باستخدام props .

لقد تعلمنا الآن كيفية تمرير الخاصيات والوصول إليها ، وكذلك كيفية تمرير المعلومات من مكون إلى آخر. لنفكر الآن في كيفية عمل الدعائم مع الدوال.

وظائف التمرير عبر الدعائم

في القسم السابق ، مررنا مصفوفة من البيانات كعوامل خاصة من مكون إلى آخر. ولكن ماذا لو كنا نعمل بدوال بدلاً من ذلك؟ يسمح لنا React بتمرير الوظائف بين المكونات. يكون هذا مفيدًا عندما نريد إجراء تغيير حالة في مكون رئيسي من المكون الفرعي الخاص به. من المفترض أن تكون الدعائم ثابتة ؛ يجب ألا تحاول تغيير قيمة الدعامة. عليك أن تفعل ذلك في المكون الذي يمررها ، وهو المكون الرئيسي.

لنقم بإنشاء تطبيق تجريبي بسيط يستمع إلى حدث نقرة ويغير حالة التطبيق. لتغيير حالة التطبيق في مكون مختلف ، يتعين علينا نقل وظيفتنا إلى المكون الذي تحتاج حالته إلى التغيير. بهذه الطريقة ، سيكون لدينا وظيفة في المكون الفرعي لدينا قادرة على تغيير الحالة.

تبدو معقدة بعض الشيء؟ لقد أنشأت تطبيق React بسيطًا يغير الحالة بنقرة زر ويعرض جزءًا من معلومات الترحيب:

راجع القلم [وظيفة التمرير عبر الدعائم في رد الفعل] (https://codepen.io/smashingmag/pen/WNwrMEY) بقلم David Adeneye.

في العرض أعلاه ، لدينا مكونان. الأول هو مكون App ، وهو المكون الرئيسي الذي يحتوي على حالة التطبيق والوظيفة لتعيين الحالة. سيكون ChildComponent هو العنصر الفرعي في هذا السيناريو ، وتتمثل مهمته في تقديم معلومات الترحيب عندما تتغير الحالة.

دعنا نقسم هذا إلى كود:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

لاحظ أننا قمنا بتعيين حالتنا على " true " ، وأن طريقة تغيير الحالة تم إنشاؤها في مكون App . في دالة render() ، نمرر حالة التطبيق ، مثل isShow ، إلى مكون ChildComponent . نقوم أيضًا بتمرير toggleShow() كدعم يسمى clickMe .

سنستخدم هذا في ChildComponent الذي يبدو كالتالي:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

الشيء الأكثر أهمية أعلاه هو أن مكون App يمرر دالة كعنصر خاص إلى ChildComponent . يتم استخدام الوظيفة clickMe() لمعالج النقر في ChildComponent ، بينما لا يعرف ChildComponent منطق الوظيفة - فهو يقوم بتشغيل الوظيفة فقط عند النقر فوق الزر. تتغير الحالة عند استدعاء الوظيفة ، وبمجرد تغيير الحالة ، يتم تمرير الحالة إلى أسفل كدعم مرة أخرى. سيتم عرض جميع المكونات المتأثرة ، مثل الطفل في حالتنا ، مرة أخرى.

يتعين علينا تمرير حالة التطبيق ، isShow ، كدعم إلى ChildComponent ، لأنه بدونها ، لا يمكننا كتابة المنطق أعلاه لعرض greeting عند تحديث الحالة.

الآن بعد أن نظرنا إلى الدوال ، دعنا ننتقل إلى التحقق من الصحة. إنها دائمًا ممارسة جيدة للتحقق من صحة البيانات التي نحصل عليها من خلال الدعائم باستخدام PropTypes. دعونا نتعمق في ذلك الآن.

ما هي PropTypes في React؟

PropTypes هي آلية للتأكد من أن المكونات تستخدم نوع البيانات الصحيح وتمرير البيانات الصحيحة ، وأن المكونات تستخدم النوع الصحيح من الدعائم ، وأن المكونات المستقبلة تتلقى النوع الصحيح من الدعائم.

يمكننا التفكير في الأمر مثل تسليم جرو إلى متجر للحيوانات الأليفة. لا يريد متجر الحيوانات الأليفة الخنازير أو الأسود أو الضفادع أو الأبراص - إنه يريد كلابًا. تضمن PropTypes تسليم نوع البيانات الصحيح (جرو) إلى متجر الحيوانات الأليفة ، وليس نوعًا آخر من الحيوانات.

في القسم أعلاه ، رأينا كيفية تمرير المعلومات إلى أي مكون باستخدام الدعائم. لقد مررنا الخاصيات مباشرة كسمة للمكون ، كما مررنا الخاصيات من خارج المكون واستخدمناها في هذا المكون. لكننا لم نتحقق من نوع القيم التي نحصل عليها في المكون الخاص بنا من خلال الدعائم أو أن كل شيء لا يزال يعمل.

يقع على عاتقنا تمامًا ما إذا كان يجب التحقق من صحة البيانات التي نحصل عليها في أحد المكونات من خلال الدعائم. ولكن في تطبيق معقد ، من الأفضل دائمًا التحقق من صحة هذه البيانات.

باستخدام PropTypes

للاستفادة من PropTypes ، يتعين علينا إضافة الحزمة باعتبارها تبعية لتطبيقنا من خلال npm أو Yarn ، عن طريق تشغيل الكود التالي في سطر الأوامر. بالنسبة إلى npm:

 npm install --save prop-types

وللغزل:

 yarn add prop-types

لاستخدام PropTypes ، نحتاج أولاً إلى استيراد PropTypes من حزمة propTypes:

 import PropTypes from 'prop-types';

لنستخدم ProTypes في تطبيقنا الذي يسرد منشورات المستخدمين. إليك كيف سنستخدمه لمكون Post :

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

هنا ، PropTypes.string و PropTypes.number هما مراجعان أساسيان يمكن استخدامهما للتأكد من أن العناصر المتلقاة من النوع الصحيح. في الكود أعلاه ، نعلن أن id رقم ، بينما content user يجب أن يكونا سلاسل.

أيضا ، PropTypes مفيدة في اصطياد الحشرات. ويمكننا فرض خاصيات المرور باستخدام isRequired :

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypes لديها الكثير من المدققين. فيما يلي بعض أكثرها شيوعًا:

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

يتوفر المزيد من الأنواع ، والتي يمكنك التحقق منها في وثائق React].

الدعائم الافتراضية

إذا أردنا تمرير بعض المعلومات الافتراضية إلى مكوناتنا باستخدام الخاصيات ، فإن React يسمح لنا بالقيام بذلك باستخدام شيء يسمى defaultProps . في الحالات التي تكون فيها PropTypes اختيارية (أي أنها لا تستخدم isRequired ) ، يمكننا تعيين defaultProps . تضمن الخاصيات الافتراضية أن للدعامات قيمة ، في حالة عدم تجاوز أي شيء. هنا مثال:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

هنا ، سيتم استخدام defaultProps للتأكد من أن this.props.name لها قيمة ، في حالة عدم تحديدها بواسطة المكون الرئيسي. إذا لم يتم تمرير أي اسم إلى Profile الفصل الدراسي ، فسيكون له الخاصية الافتراضية Stranger التي يمكن الرجوع إليها. هذا يمنع حدوث أي خطأ عند عدم تمرير خاصية. أنصحك دائمًا باستخدام defaultProps لكل PropType اختياري.

خاتمة

أتمنى أن تكون قد استمتعت بالعمل من خلال هذا البرنامج التعليمي. نأمل أن يكون قد أوضح لك مدى أهمية الخاصيات وأنواع propTypes في بناء تطبيقات React ، لأنه بدونها ، لن نتمكن من تمرير البيانات بين المكونات عند حدوث التفاعلات. إنها جزء أساسي من بنية إدارة الحالة والقائمة على المكونات التي تم تصميم React حولها.

تعتبر PropTypes مكافأة لضمان استخدام المكونات لنوع البيانات الصحيح وتمرير البيانات الصحيحة ، وأن المكونات تستخدم النوع الصحيح من الدعائم ، وأن المكونات المستقبلة تتلقى النوع الصحيح من الدعائم.

إذا كانت لديك أي أسئلة ، فيمكنك تركها في قسم التعليقات أدناه ، وسيسعدني الإجابة على كل سؤال والعمل على حل أي مشكلات معك.

مراجع

• "التفكير في رد الفعل" ، React Docs
• "قائمة ومفاتيح" ، React Docs
• “Typechecking with PropTypes” ، React Docs
• "كيفية تمرير الدعائم إلى المكونات في التفاعل" ، روبن ويروش