העברת מידע בין קומפוננטות בעזרת prop ב-component class בריאקט
props מגיעים אחרת מאשר ב-functional component. ההרצאה ממירה את Sales למחלקה ומראה איך מקבלים נתונים מהאב, מגדירים ערכי ברירת מחדל ועובדים עם קונסטרקטור.Sales שיורשת מ-Component, עם render שמחזירה את אותו JSX. ה-interface של ה-props נשאר ללא שינוי, עם category אופציונלי ו-percent.render. כדי לדעת איזה טיפוס מגיע, כותבים בסוגריים משולשים אחרי Component את טיפוס ה-props, כלומר הקומפוננט הופך לגרסה גנרית.this.props, ושם נמצאים category, percent ו-children, שיוסבר בהמשך.public static get defaultProps() שמחזירה אובייקט מטיפוס ה-props, עם קטגוריה candies ואחוז 10. הוא static, כלומר שייך למחלקה ולא לאובייקט שלה. בגלל שהכתיב מחייב, צריך למלא גם את percent. לפעמים נדרש רענון הדף.SalesProps וקורא ל-super(props) כדי להעביר אותם למחלקה שממנה יורשים. בלי זה מתקבלת שגיאה, כי הקונסטרקטור שלנו דורס את זה של Component.cc יוצר class component, וה---props מוסיף אליו interface והגנרי, בלי קונסטרקטור.undefined אפשר גם לבצע אופרטור טרינארי, אבל המרצה בוחר בערכי ברירת מחדל.פרקי ההרצאה: העברת מידע בין קומפוננטות בעזרת prop ב-component class בריאקט
תמלול ההרצאה: העברת מידע בין קומפוננטות בעזרת prop ב-component class בריאקט
הטקסט המלא של הדקות הראשונות בהרצאה «העברת מידע בין קומפוננטות בעזרת prop ב-component class בריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו ראינו שאנחנו יכולים לבנות קומפוננט על ידי functional component ועל ידי class component. אנחנו רוצים עכשיו לראות איך בעצם אפשר להתעסק עם ה-props או לקבל props אם אנחנו בונים class component במקום functional component.
אז בואו נראה, קודם כל כשאנחנו רצינו להעביר את הדבר הזה ל-class component, מה היה לנו פה? בואו רגע נשים את כל זה בהערה, ומה שהיה לנו פה זה Class, אני אקרא לה באותו השם, Sales Extends Component.
זה בעצם מה שהיה, אני רק אעביר את זה לפה. ובתוך עשינו Public Render שמחזירה JSX Element ויש לנו פה את כל ה-Return שהיה מקודם בפונקציה, היה לנו כאן, נוריד רק את ההערה, ואנחנו לא כל כך צריכים פה את כל אלה אז אני רגע יוריד אותם וכמובן אין לי כרגע props אז הוא צועק עליי ואנחנו רוצים לראות
איך בעצם אנחנו יכולים לקבל props כי זה לא בדיוק אותו הדבר כמו ב-functional component כשאנחנו בינו functional component קיבלנו את ה-props לסוגריים של הפונקציה האם אנחנו מקבלים את ה-props לסוגריים של הרנדר התשובה לא אנחנו לא מקבלים את ה-props לסוגריים של הרנדר משהו אחר קורה כאן אבל
כן אנחנו נמצאים בטייפ סקריפט ויש לנו אינטרפייס בואו ניקח את האינטרפייס לכאן האינטרפייס מגדיר מה הדברים שקיימים בתוך הפרופס כרגע זה קטגורי והוא אופציונלי ופרסנט כמו שהיה לנו מקודם עכשיו בשביל שאנחנו נקבל לקלאס קומפוננט שלנו props מהסוג הזה אנחנו משתמשים בכלי טייפ סקריפטי
שנקרא generics. שוב אם אתם לא סגורים על זה יש מודול טייפ סקריפט חשוב מאוד ללכת ולסגור את כל הפיצ'רים האלה אז ג'נריק סוגריים משולשים שאנחנו שמים כאן הקומפוננט עצמו הוא הופך להיות ג'נרי יש לו בעצם גרסה ג'נרית פה אנחנו אומרים לו שיש לנו טיפוס נתונים props שמגיע אלינו.
זה אומר לו שזה ה-props שלנו. למה פה אנחנו עדיין חוטפים שגיאה? בגלל שאנחנו בקלאס. איך אני ניגש למידע שנמצא אצלי בקלאס על ידי שפת טייפ סקריפט?
this, נקודה. והנה יש לי props והנה בתוכו יש קטגורי, יש לו פרסנט, יש לו גם children שנראה בהמשך מה זה. אבל כרגע אני יכול לגשת לדיס נקודה ולהגיע לפרופס.
זה פותר לנו את הבעיה של הסיילס. דרך אגב, זה אנחנו צריכים גם כן. ובואו קודם כל נראה איך זה מתנהג בצורה כזאת. היה לנו פה את ההום ואני רוצה את שני החבר'ה האלה להביא.
בואו רגע נסתכל על זה. 20% off on all beverages. עובד פרפקט. אם אני אומר לו, תשמע, אני רוצה להביא רק פרסנט, אז אני רואה שיש לי פה איזה בעיה, מפני שאין לי את הפרסנט, הוא אונדיפיינד, לא הייתי חייב להביא אותו, לא, סליחה, את הקטגורי.
יש לי את הקטגורי ולא הבאתי את הקטגורי, כי היא דיפולט ואליו, פרסנט הבאתי, אז היא אונדיפיינד, הכל בסדר, אבל אני רוצה לתת לה איזשהו דיפולט ואליו, כמובן שאני יכול לבצע פה את אותו טרינארי שהיה לי מקודם, מפני שזה, הנה זה הטרינארי, מפני שזה מכיל, הקטגוריה מכילה undefined אז אין בעיה לעשות טרינארי על undefined
ולהציג פסקה אחרת במידה ואין קטגורי זה בסדר זה ממש אותו הדבר. אבל אני רוצה לראות איך אני מיישם פה default values וזה לא השיטה הזאת. בקלאס מה שאנחנו עושים בקלאס קומפורננט אנחנו יוצרים public static גט דיפולט פרופס בצורה כזאת והוא מחזיר לנו sales props ואנחנו מחזירים את האובייקט שאנחנו רוצים. האובייקט שלנו כרגע מכיל רק
קטגורי וניתן לו