رد فعل البرنامج التعليمي الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم

اليوم ، في الجزء العاشر من ترجمة دورة 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: مشروع المقرر

الدرس 20. ورشة العمل. خصائص المكون ، التصميم

→ الأصل

ob الوظيفة

1. إنشاء مشروع تطبيق React جديد.
2. اعرض مكون التطبيق في صفحة التطبيق ، والتي يجب أن يكون رمزها في ملف منفصل.
3. يجب أن Joke مكون التطبيق 5 مكونات Joke تحتوي على نكات. جلب هذه المكونات بالطريقة التي تريدها.
4. يجب أن يقبل كل مكون Joke خاصية question ومعالجتها ، للجزء الرئيسي من النكت ، punchLine ، punchLine الرئيسية.

▍ مهمة إضافية

بعض النكات تتكون تماما من عبارة رئيسية. على سبيل المثال: "من الصعب شرح التورية للمبتدئين لأنهم يأخذون الأمور حرفيًا دائمًا." فكر في كيفية قيام المكون Joke بعرض خاصية punchLine إليها فقط ، إذا لم يتم تعيين خاصية question . تجربة مع تصميم المكونات الخاصة بك.

olution الحل

المهمة الرئيسية

سيبدو ملف index.js مألوفًا جدًا:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />,   document.getElementById("root")) 

فيما يلي رمز ملف App.js :

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <Joke               question="What's the best thing about Switzerland?"               punchLine="I don't know, but the flag is a big plus!"           />                     <Joke               question="Did you hear about the mathematician who's afraid of negative numbers?"               punchLine="He'll stop at nothing to avoid them!"           />                     <Joke               question="Hear about the new restaurant called Karma?"               punchLine="There's no menu: You get what you deserve."           />                     <Joke               question="Did you hear about the actor who fell through the floorboards?"               punchLine="He was just going through a stage."           />                     <Joke               question="Did you hear about the claustrophobic astronaut?"               punchLine="He just needed a little space."           />                 </div>   ) } export default App 

يرجى ملاحظة أنه نظرًا لأن ملف مكون Joke موجود في نفس المجلد مثل ملف مكون App ، فإننا import Joke from "./Joke" . نرجع العديد من العناصر من App ، لذلك نحن بحاجة إلى التفاف كل المخرجات في علامة معينة ، على سبيل المثال ، في <div> . إلى مثيلات المكون ، نقوم بتمرير punchLine question و punchLine .

فيما يلي رمز ملف Joke.js :

 import React from "react" function Joke(props) {   return (       <div>           <h3>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

هنا ، عند الإعلان عن وظيفة Joke ، نحدد معلمة props . أذكر أنه مثل هذا الاسم الذي يستخدم وفقا للتقاليد المعمول بها. في الواقع ، يمكن أن يكون أي شيء ، ولكن من الأفضل أن نسميها props .

نرجع عدة عناصر من المكون - لذلك يتم تضمينها في <div> . باستخدام props.question و props.punchLine يمكننا الوصول إلى الخصائص التي تم تمريرها إلى مثيل المكون عند إنشائه. هذه الخصائص تصبح خصائص الكائن props . وهي محاطة بأقواس متعرجة بسبب حقيقة أن كود JavaScript المستخدم في ترميز JSX يجب أن يكون محاطًا بأقواس متعرجة. خلاف ذلك ، سيستغرق النظام أسماء المتغيرات كنص عادي. بعد زوج من عناصر <h3> ، يتم عرض النص الرئيسي للنكتة في أحدهما ، وفي الآخر - العبارة الرئيسية الخاصة به ، هناك عنصر <hr/> يصف الخط الأفقي. سيتم عرض هذه الخطوط بعد كل نكتة ، تفصل بينها.

هذا هو ما يبدو عليه مشروع التطبيق في VSCode.


التطبيق في VSCode

هنا هي صفحة التطبيق.


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

مهمة إضافية

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

 <Joke   punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." /> 

إذا وضعت هذا الرمز في أعلى الرمز الذي App مكون App ، فستظهر صفحة التطبيق بهذا الشكل.


صفحة التطبيق شكلت بشكل غير صحيح

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

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

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

نقوم بتعيين العنصر الأول <h3> نمطًا ، والذي يتم تحديده أثناء إنشاء مثيل للمكون بناءً على وجود خاصية props.question في الكائن. إذا كانت هذه الخاصية موجودة في الكائن ، فسيتم display: block العنصر على display: block النمط display: block على الصفحة ؛ وإذا لم يكن الأمر كذلك ، display: none ولا يتم عرضه على الصفحة. استخدام مثل هذا البناء سيؤدي إلى نفس التأثير:

 <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3> 

هنا ، display: none نمط معين للعنصر إذا كان كائن props يحتوي على خاصية question ، وإلا فلن يتم تعيين أي شيء لخاصية display .

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


معالجة مكونة مناسبة لموقف لا تنتقل إليه خاصية السؤال

قد تلاحظ أن جميع العناصر المكونة بواسطة المكون Joke تبدو متشابهة. دعونا نفكر في كيفية اختيار تلك التي تمر فقط على خاصية punchLine . سوف نحل هذه المشكلة باستخدام الأنماط المضمنة ، والنهج الذي درسناه أعلاه. فيما يلي الرمز المحدّث لمكون Joke :

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>           <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

وهنا ما يظهر الآن على صفحة التطبيق.


تصميم عنصر مختلف عن الآخرين

الآن وقد عملنا على المكون Joke ، أصبح أكثر تنوعًا وأكثر ملاءمة لإعادة الاستخدام.

ملخص

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

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