• בלוג
  • השוואת גבהים בריאקט

השוואת גבהים בריאקט

17/12/2018

פוסט זה כולל טיפ קצר לעבודה עם React. אם אתם רוצים ללמוד איתי ריאקט מההתחלה ובצורה מקצועית תשמחו לשמוע שבניתי קורס מלא הכולל עשרות שיעורי וידאו והמון תרגול בו לומדים ריאקט מההתחלה ועד לנושאים המתקדמים.
לפרטים נוספים והרשמה בקרו בדף קורס ריאקט כאן באתר.
 

הלוגיקה הריאקטית עובדת מאוד טוב כשאנחנו צריכים להפוך מידע לאלמנטים ב DOM, אבל מה קורה כשצריך להשתמש באלמנטים מסוימים ב DOM כדי להשפיע על אחרים? במצב כזה נצטרך לעקוף את ריאקט ולתבל עם קצת jQuery. הנה דוגמא קצרה:

תוכן עניינים

  1. הבעיה עם גבהים

1. הבעיה עם גבהים

בקודפן הבא אפשר לראות ארבע תיבות טקסט ומתחת לכל אחת יופיע הטקסט שבתיבה בתור h1:

אפשר בקלות לכתוב יותר טקסט בתיבה אחת וכך לקבל יותר שורות ב h1 שמתחתיה. בהנחה שאנחנו לא יודעים מה משתמשים יכתבו נרצה להוסיף קוד JavaScript שישווה באופן דינמי את הגבהים אחרי כל שינוי טקסט. וזה בדיוק אחד המקומות ש render פשוט לא תעזור לנו. הפונקציה render של ריאקט יכולה להסתכל רק על ה Props וה State, ואילו אנחנו צריכים את האלמנטים האחרים ב DOM.

שתי פונקציות אחרות שכן יעזרו הן componentDidUpdate ו componentDidMount. הראשונה נקראת אחרי כל שינוי שמוביל ל render, והשניה נקראת אחרי ה render הראשון בדפדפן. כדי לעדכן את הגבהים נוסיף את הפונקציה:

  fixHeights() {
    let maxHeight = 0;

    $("h1").each(function(){
      console.log($(this).height());
      if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
        console.log(maxHeight);
      }
    });

    $("h1").css('min-height', maxHeight);
  }

ונקרא לה גם מתוך componentDidMount וגם מתוך componentDidUpdate. הנה הקודפן המתוקן: