رد فعل البرنامج التعليمي الجزء 21: الدرس الثاني وتقديم ورشة عمل الشرطي

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



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر

الدرس 37. التقديم الشرطي ، الجزء 2

→ الأصل

في البرنامج التعليمي اليوم حول التقديم الشرطي ، سنتحدث عن استخدام عامل التشغيل المنطقي && (And). سنقوم بتجربة مشروع قياسي تم إنشاؤه بواسطة create-react-app ، في ملف App.js والذي يوجد به الكود التالي:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           unreadMessages: [               "Call your mom!",               "New spam email available. All links are definitely safe to click."           ]       }   }   render() {       return (           <div>              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           </div>       )   } } export default App 

الآن يظهر التطبيق في المتصفح كما هو موضح أدناه.


صفحة التطبيق في المتصفح

ربما تكون قد استخدمت بالفعل عامل التشغيل && في إنشاءات مثل true && false (والتي تعطي false ). لكي يتم إرجاع التعبير true كنتيجة لحساب مثل هذا التعبير ، يجب أن يبدو وكأنه true && true . عند معالجة هذه التعبيرات ، تحدد JavaScript ما إذا كان جانبها الأيسر صحيحًا ، وإذا كان الأمر كذلك ، فأرجع ببساطة ما هو في الجانب الأيمن منها. إذا تمت معالجة تعبير عن النموذج false && false ، فسيتم إرجاع false على الفور ، دون التحقق من الجانب الأيمن من التعبير. نتيجة لذلك ، يمكن استخدام عامل التشغيل && في التقديم الشرطي. مع ذلك ، يمكنك إما إرجاع شيء سيتم عرضه على الشاشة ، أو عدم إرجاع أي شيء.

دعنا نحلل كود تطبيق التدريب.

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


التطبيق يعلمنا أنه لا توجد رسائل غير مقروءة

لتحقيق هذا التأثير ، يكفي إحضار الصفيف إلى هذا النموذج: unreadMessages: [] .

إذا لم تكن هناك رسائل غير مقروءة ، فمن الممكن تمامًا عدم عرض أي رسالة على الإطلاق. إذا استخدمنا عامل التشغيل الثلاثي الذي تحدثنا عنه في آخر مرة لتنفيذ هذا السلوك للتطبيق ، فيمكن إعادة كتابة طريقة التقديم render() الخاصة بمكون App على النحو التالي:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 ?              <h2>You have {this.state.unreadMessages.length} unread messages!</h2> :               null           }       </div>   ) } 

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

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 &&              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           }       </div>   ) } 

إذا كان هناك شيء ما في المصفوفة ، فسيتم عرض الجانب الأيمن من التعبير على الصفحة. إذا كانت المصفوفة فارغة ، فلن يتم عرض أي شيء على الصفحة.

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

الدرس 38. ورشة العمل. التقديم الشرطي

→ الأصل

ob الوظيفة

في ما يلي رمز المكون الوظيفي App.js ، والذي يتم تخزينه في ملف App.js لمشروع قياسي تم إنشاؤه باستخدام create-react-app.

 import React from "react" function App() {   return (       <div>           Code goes here       </div>   ) } export default App 

تحتاج إلى القيام بما يلي:

1. تحويل رمز المكون لتجهيزه مع الدولة.
2. تأكد من أن حالة المكون ستحتوي على معلومات حول ما إذا كان المستخدم "قام بتسجيل الدخول" أم لا (في هذا التمرين ، يعني "تسجيل الدخول" إلى النظام و "تسجيل الخروج" تغيير القيمة المقابلة المخزنة في الحالة فقط).
3. أضف إلى الصفحة التي تشكل المكون زرًا يتيح للمستخدم تسجيل الدخول والخروج.
   
   
   1. هذه مهمة إضافية. تأكد من أنه إذا لم يتم تسجيل دخول المستخدم ، LOG IN الزر LOG IN ، وإذا كان قد تم تسجيل الدخول ، LOG OUT بتسجيل LOG OUT .
      
4. على الصفحة التي تم تكوينها بواسطة المكون ، قم Logged in حالة تسجيل دخول المستخدم ، ثم Logged out إذا لم يتم Logged out .
   

إذا كنت تشعر الآن أنه من الصعب عليك البدء في حل هذه المشكلات ، فقم بإلقاء نظرة على النصائح ثم العمل.

نصائح

لإكمال هذه المهمة ، يجب أن تتذكر الكثير مما تحدثنا عنه في الفصول السابقة. بادئ ذي بدء ، يجب أن يكون المكون الذي يمكن أن يكون له حالة مكونًا يستند إلى فصل دراسي. يجب أن يكون هذا المكون منشئ. في حالة المكون ، يمكنك تخزين خاصية منطقية ، على سبيل المثال ، يمكن تسميتها isLoggedIn ، حيث تشير القيمة ، true أو false ، إلى ما إذا كان المستخدم قد قام بتسجيل الدخول أم لا. من أجل أن يكون الزر الذي يجب إضافته إلى الصفحة التي تم إنشاؤها بواسطة التطبيق قادراً على أداء وظائفه ، سوف يحتاج إلى onClick أحداث onClick . لعرض نصوص مختلفة ، استنادًا إلى القيمة المتغيرة للحالة ، سيكون من الضروري اللجوء إلى تقنية التقديم الشرطي.

olution الحل

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

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

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }   }   render() {          return (           <div>               Code goes here           </div>       )   } } export default App 

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

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       console.log("I'm working!")   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

عند النقر على زر LOG IN ، I'm working! .

الآن دعنا نتذكر أنه عندما isLoggedIn على الزر ، فإن خاصية isLoggedIn المخزنة في الحالة isLoggedIn من true إلى false ، والعكس صحيح. للقيام بذلك ، في زر النقر فوق معالج ، سوف تحتاج إلى استدعاء وظيفة this.setState() ، والتي يمكن استخدامها بطريقتين. وهي ، يمكن أن تقدم ، في شكل كائن ، فكرة جديدة عن ما يجب تضمينه في الدولة. يوفر المتغير الثاني من استخدامه نقل دالة تأخذ الحالة السابقة للمكون إليها وتُشكِّل واحدة جديدة ، مع إعادة الكائن مرة أخرى. سنفعل ذلك تماما. هذا ما حصلنا عليه في هذه المرحلة من العمل.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

هنا يمكننا استخدام بنية if-else ، لكننا فقط نحول true إلى false و false إلى true باستخدام العامل المنطقي ! (لا).

حتى الآن ، ليس لدينا آلية تسمح لنا ، بناءً على ما يتم تخزينه في الولاية ، بالتأثير على مظهر التطبيق. لذلك ، سنقوم الآن بحل المهمة الإضافية للمهمة رقم 3. وهي ، سوف نجعل الملصق الموجود على الزر يتغير وفقًا لحالة المكون. من أجل تحقيق ذلك ، يمكنك تعريف متغير في طريقة render() قيمته ، LOG IN أو LOG OUT ، على ما يتم تخزينه في الحالة. ثم يمكن استخدام هذه القيمة كنص زر. هنا هو كيف يبدو.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>           </div>       )   } } export default App 

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

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>               <h1>{displayText}</h1>           </div>       )   } } export default App 

هذا هو ما يبدو عليه التطبيق في المتصفح.


صفحة التطبيق في المتصفح

يؤدي النقر فوق الزر " LOG IN الموضح في الشكل السابق إلى تغيير حالة التطبيق ، وبعد ذلك يتم عرض " LOG OUT على الزر ، ويتم عرض النص على الصفحة لإعلام المستخدم بأنه قام بتسجيل الدخول.

النتائج

واصلنا اليوم الحديث عن التقديم الشرطي ، وفحصنا استخدام && عامل التشغيل ، وأكملنا مهمة عملية تنطوي على العديد من الآليات التي درسناها. في المرة القادمة ، سوف تستمر في العمل على تطبيق Todo وموضوع جديد.

أعزائي القراء! هل تعاملت مع مهمة اليوم العملية؟