ספרית ריאקט עדיין צעירה ולמרות ההתלהבות ממנה לא תמיד קל למצוא רכיבים קיימים. כך קרה השבוע כשרציתי לשלב רכיב של רשימת פריטים שתאפשר למשתמש למיין מחדש את הפריטים באמצעות גרירה: קל למצוא 2-3 ספריות בריאקט, אבל אף אחת מהן לא ממש עובדת. במקום לשבור את הראש החלטתי להשתמש ברכיב קיים מ jQuery UI רק בשביל למצוא את עצמי עם באג ערמומי בשילוב.

1. התוכנית: שילוב רכיב jQuery UI עם ריאקט

על הניר הכל נשמע פשוט: ב componentDidMount יוצרים את הפלאגין של המיון ומחברים קוד לטיפול באירוע מיון וב componentWillUnmount מבטלים את הרישום. כך נראה הקוד.

קל לראות שהמיון לא ממש עובד. השאלה היא כמובן למה.

2. ריאקט לא אוהב שמשנים לו את ה DOM

התקלה הופכת למעניינת אם פותחים את כלי הפיתוח של ריאקט או מוסיפים נקודות עצירה. אז מתברר שסדר הפריטים ב State אכן כמו שצריך ודוקא הפונקציה render היא שטועה: כלומר לאחר רינדור המערך:

['two', 'one', 'three', 'four']

מתקבלת הרשימה one, two, three, four. הסיבה קשורה למימוש של jQuery UI: כדי להחליף את האלמנטים בתצוגה רכיב זה משנה את ה DOM. כשריאקט מגיע לרנדר מחדש את האלמנטים ולהשוות עם המצב הקודם, השינויים של jQuery UI מבלבלים את המנגנון.

3. והפתרון

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