למישהי יש רעיון איך לממש מערך של אובייקטים עם מיקומים (טור ושורה) בטבלה בריאקט (grid)?

  • הוסף לסימניות
  • #1
לטבלה יש 2 עמודות ו4 שורות.
ולא כל העמודות מלאות...
לצרוך הדוגמא יש מערך של 4 ריבועים, כל אחד ממוקם בעמודה אחרת בטבלה.
תודה!
 
  • הוסף לסימניות
  • #2
אני לא יודעת באיזו ספרית UI ובאיזו קומפוננטה את משתמשת בשביל הטבלה,
אבל ברוב הקומפוננטות המבנה הוא שמקבלים בין היתר prop שנקרא renderItem והוא מחזיר את הקומפוננטה שבכל משבצת.
את יכולה להחזיק ליסט עם חורים (מקומות שהם null למשל)
ובrenderItem להחזיר null עבורם.
 
  • הוסף לסימניות
  • #3
את מתכוונת לאתחל את המערך של האובייקטים שיהיו בו איברים כמספר המשבצות בטבלה?
 
  • הוסף לסימניות
  • #4
  • הוסף לסימניות
  • #6
ועוד משהו, אם אני עושה ככה אז מה המשמעות של המיקומים לכל אובייקט? אם אני פשוט ממלאה לפי הסדר...?
 
  • הוסף לסימניות
  • #7
  • הוסף לסימניות
  • #8
ועוד משהו, אם אני עושה ככה אז מה המשמעות של המיקומים לכל אובייקט? אם אני פשוט ממלאה לפי הסדר...?
לא הבנתי.
הוא רץ לפי הרשימה וממקם במקום הנכון.
אחרת איך תדעי שדווקא בשורה הX את רוצה למלא?
 
  • הוסף לסימניות
  • #10
לא הבנתי.
הוא רץ לפי הרשימה וממקם במקום הנכון.
אחרת איך תדעי שדווקא בשורה הX את רוצה למלא?
הענין הוא שאין איך לגשת למספר שורה בטבלה, מה שעשיתי זה ליצור טבלה ע"י לולאה של 4- לשורות ובתוכו לולאה של 2- לעמודות, ובתוכם, לולאה שעוברת על המערך של האובייקטים ובודקת האם יש אובייקט במיקום הזה שבו אני נמצאת.
זה מה שאת התכוונת בעצם?
הענין הוא שהוא בעצם עובר על כל המערך של האובייקטים בכל משבצת של הטבלה, שזה די הרבה,
יש לך רעיון יותר יעיל וקצר?
 
  • הוסף לסימניות
  • #11
לא השתמשתי בקומפוננטה של ליסט, עשיתי מערך רגיל
זה לא מומלץ, כי קשה יותר לעצב ככה,
אבל בכזה מקרה הrenderItem הוא הפונקציה של הmap.
הענין הוא שאין איך לגשת למספר שורה בטבלה, מה שעשיתי זה ליצור טבלה ע"י לולאה של 4- לשורות ובתוכו לולאה של 2- לעמודות, ובתוכם, לולאה שעוברת על המערך של האובייקטים ובודקת האם יש אובייקט במיקום הזה שבו אני נמצאת.
זה מה שאת התכוונת בעצם?
הענין הוא שהוא בעצם עובר על כל המערך של האובייקטים בכל משבצת של הטבלה, שזה די הרבה,
יש לך רעיון יותר יעיל וקצר?
האמת שאני צריכה יותר להבין מה המטרה שלך כדי למצוא פיתרון יעיל.
 
  • הוסף לסימניות
  • #12
לא הבנתי ב100%
מה הבעיה לפעול כך
JSX:
{rows.map((row, indexRow) => (
<Fragment key={indexRow}>
 <tr>
  {columns.map((column, indexCol) => (
   <td key={indexCol}>
   {row[indexCol]}
   </td>
  ))}
 </tr>
</Fragment>
))}
 

פרוגבוט

תוכן שיווקי
פרסומת

פוסטים חדשים שאולי לא קראת....

הצטרפות לניוזלטר

איזה כיף שהצטרפתם לניוזלטר שלנו!

מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!

לוח מודעות

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק כה

אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
נקרא  2  פעמים
למעלה