גישה ישירה ל-DOM ב-React
Ref, על נגן שמע.Audio עם תגית audio, שיר שנוסף לתיקייה assets/audio, ושלושה כפתורים משלנו: play, pause ו-stop, במקום הכפתורים המובנים של הדפדפן. הפונקציות play ו-pause שייכות לאלמנט עצמו, ולכן צריך גישה ישירה אליו.assets/audio ושמים ב-src. כדי ש-React תכיר סיומת mp3, מוסיפים בקובץ react-app-env.d.ts הצהרת declare module לכל קובץ .mp3.Audio: בקוד חיפש המרצה את הקומפוננט ולבסוף הגדיר את Audio בעצמו, כי כבר קיים אובייקט בשם הזה.controls נותנת את הנגן הרגיל, ומאשרת שהשיר נטען. autoPlay לא הוצע על ידי העורך.controls ומוסיפים שלושה button, מעוצבים בלי מסגרת, עם רקע שקוף, cursor: pointer ושוליים של 5px.audioRef מסוג RefObject<HTMLAudioElement> וממלאים אותו עם createRef של React. הוא ריק בהתחלה.audio כותבים ref={this.audioRef}. כך האובייקט מצביע על האלמנט האמיתי ב-DOM.this.audioRef.current. מפעילים עליו play() ו-pause(). כפתור stop קורא ל-load(), שטוען מחדש, ולכן מתחיל מההתחלה.onClick ולא פונקציה נפרדת.ref הוא הצבעה לאובייקט האמיתי. האובייקט עצמו נמצא ב-current.פרקי ההרצאה: גישה ישירה ל-DOM ב-React
תמלול ההרצאה: גישה ישירה ל-DOM ב-React
הטקסט המלא של הדקות הראשונות בהרצאה «גישה ישירה ל-DOM ב-React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הכלי הבא שאנחנו הולכים לראות בreact היכולת הבאה זאת היכולת של react לגשת לדום כלומר שאנחנו בתור מתכנתים ניגש לדום עכשיו זה קצת off כזה כי הרי דיברנו הרבה פעמים על זה שאנחנו לא רוצים לגשת לדום בעצמנו אנחנו רוצים לגשת תמיד לreact דרך המרכיבים של react בכדי שreact ייגש לדום זה הרבה יותר יעיל אבל יש מקרים יוצאים מהכלל והמקרים האלה הם כאשר אנחנו רוצים לגשת לאיזה שהם משתנים או
פונקציות שקיימים בדום אבל React לא מספקת לנו תחליף להם. בואו נראה דוגמא נניח שאנחנו רוצים ליצור קלאס קומפוננט בואו ניצור אותו בהום והוא נקרא אודיו, הוא רוצה להשמיע אודיו.
כאשר אנחנו מתעסקים עם אודיו, יש לנו כל מיני פונקציות של JavaScript שקיימות לנו בדום, אבל React לא נותנת לנו את התחליף לפונקציות האלה.
זה לא אירוע on-click שקיים או כל מיני דברים שריאקט מספקת לנו. ובמצב הזה, כשאנחנו רוצים לגשת לאותן פונקציות, אין לנו ברירה אלא לגשת ישירות לדום.
אז איך זה מתבצע? בואו נסתכל רגע על הרכיב הזה אודיו וניקח תגית אודיו של html קיימת תגית כזאת ואנחנו רוצים לתת לה פה איזשהו src איזשהו סונג מסוים אז יש לנו כאן בואו ניקח רגע את assets וב-assets בואו נפתח תיקייה שנקרא לה אודיו בצורה כזאת ובתוך תיקיית audio אני רוצה לגרור
איזשהו שיר ששמתי פה אז הנה שמתי אותו עכשיו בתוך תיקיית audio אפשר עם זה להיפטר והשיר נקרא fade into you ואנחנו רוצים לשים אותו פה import song from מה הנתיב שלנו אז אני עולה שתי נקודות תקיעה הכוונה וולה או תקיעה וולה או תקיעה ומגיע לאסץ ומגיע לאודיו ומגיע לפייד אינטו נקודה mp3. עכשיו יש פה איזשהו אישיו אחר שאנחנו שנייה צריכים לפתור והוא לא קשור לנושא
שאנחנו רואים כרגע והאישיו הוא שלמרות שאין לי פה שגיאה במחרוזת אני מקווה פייד אינטו יו זה בייסיקלי השם שלו לפי מה שאני רואה פה mp3 עדיין ריאקט אומרת לי תשמע אני לא יודעת מה זה הדבר הזה וזה לא בגלל שהיא לא מוצאת את הנתיב זה בגלל שהיא לא מכירה סיומות mp3 וזה קונספט שנקרא מודול של ריאקט jpeg תמונות היא כן מכירה לא כל סיומת היא מכירה אם יש
איזה קובץ מסוים עם סיומת חדשה שריאקט לא מכירה אנחנו יכולים לבוא לקובץ מיוחד וזה הקובץ הזה שנמצא פה React App Environment D ולבנות כאן הגדרה declare של מודול חדש שהוא כל קובץ עם סיומת mp3. עכשיו לימדנו את ריאקט שיש משהו שנקרא קובץ עם סיומת mp3. בואו נחזור לכאן ונפתרה הבעיה מכיר פתאום סיומות mp3 איזשהו פיצ'ר שאנחנו
צריכים להגדיר בראיית עכשיו אנחנו יכולים לקחת את הסונג הזה לפה והאודיו יכול להשמיע לנו את הסונג אם אני עכשיו אגש לאודיו ואעשה לו לדוגמה auto play וכמובן אנחנו רוצים אה הוא לא מאשר לי auto play למה הוא לא מאשר לי auto אוקיי, אורייט, בואו ננסה משהו אחר.
Controls אולי תאשר לי. ואני הולך רגע, אני רוצה לקחת את האודיו לפה. אודיו, הנה הוא. בואו נראה שהוא הביא לי אותו מאותו המקום.
לא הביא לי אותו בכלל. אוקיי, בוא תנסה להביא לי. טוב, הוא לא מביא לי, כנראה שיש לו כבר איזה משהו שנקרא אודיו. אז אני צריך להגדיר אודיו בעצמי From.
הוא נמצא באודיו, פלאש אודיו, נראה לי שזה זה, והנה האודיו. אני מתחיל להשמיע אותו. אוקיי, אני לא יודע אם אתם שומעים את זה או לא שומעים, אבל בהחלט שומעים את האודיו.
נוריד טיפה את הווליום. אוקיי, הכל עובד פרפקט. איפה פה נכנסתי לדום? אז רגע, מה קורה אם אני לא רוצה את ה-controls הדיפולטיים שלהם?
בואו נוריד אותם עכשיו אני פונה ואין לי בכלל רכיב כזה בואו אפילו נשים פה בוקס בכדי לראות את הקופסה הנה הקופסה אבל אני לא רואה את הקונטרולים כי אני לא רוצה לראות את הקונטרולים הדיפולטיים אני רוצה ליצור שלושה קונטרולים משלי פה שלוש לחצנים בטון פליי
ואוז וסטופ היא שלי הרבה יותר מרשים מהקונטולים שלהם, סתם, אני צוחק, אבל זה מה שאני רוצה, זו ההוראה שקיבלתי. בואו רגע נלך לכאן ונגדיר ש-audio חצותן, יש לו קורסור פוינטר, יש לו background color transparent, יש לו border none ויש
לו מרג'ין חמישה פיקסלים ואז הוא רואה קצת יותר מרשים כזה, אוקיי? אלה הלחצנים, פליי, פאוז, סטופ.
בפליי אני רוצה להשמיע את השיר, פאוז, לעצור אותו, או כאילו להפסיק אותו, סטופ, לעצור לגמרי. איך אנחנו גורמים ללחצן להשמיע את השיר? ולפאוז ולסטופ כמובן גם כן.
און קליק, מה אני רוצה לעשות באון קליק? אז אני יכול להפעיל פה פונקציה חיצונית, זה ברור, זה פשוט תתחיל לנגן. בואו אולי נעשה את זה, נעשה function play, זאת הפונקציה, ואני רוצה לקחת את ה-play ולשים פה.
למה הוא צועק עליי? אוי, שאני נמצא ב-class component. טוב, אז בואו נבנה אותה כ-private play שווה בצורה כזאת ואז פה אני רושם dist.play והנה יש לנו פה את הפונקציה.
בוא נעשה עלר טסט רק בכדי לראות אם זה עובד וזה עובד וכל מה שאני רוצה לעשות זה מפה לגשת לאן לרכיב הזה ולהפעיל בתוכו פונקציה שנקראת פליי אבל אין לריאק תחליף לפונקציה שנקראת פליי זה מצב שאני צריך לגשת לרכיב הג'אווה סקריפטי עצמו ולהגדיר פליי שם.
אז מה ריאקט נותנת לנו? ריאקט נותנת לנו אובייקט, אני אגדיר אותו פה באזור הגלובלי, פרייבט. אני אקרא לו סתם בשם, אני יכול לקרוא לו בכל שם, אני אקרא לו Audio Reference כי זה לא האובייקט הזה, זה רפרנס אליו, אז אני אקרא לו Audio Reference, הסוג שלו זה Ref Object,