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

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. הנה הקודפן המתוקן: