Svelte how to pu sh в компонентах, которые имеют разные свойства в соответствии с номерами

Question

Итак, у меня есть небольшой проект, который я делаю в течение 100 дней программирования, и я начинаю замечать, что чем больше дней я продвигаюсь, тем больше мне приходится писать одного и того же, только с одной разницей. Вот пример из моего кода.

<Tasks {...projects.Day1} />
<Tasks {...projects.Day2} />
<Tasks {...projects.Day3} />

Я хочу go полностью до 100, но мне потребуется набрать одно и то же 100 раз с одной небольшой разницей. Я пробовал использовать каждый l oop вот так:

{#each dataLength as _, i}
      <Tasks {...projects.Day{ i }/>
{/each}

Но Svelte не принимает это. Поэтому у меня нет возможности передавать реквизиты из разных ключей объекта. Есть ли способ сделать это или есть альтернатива? Вот мое полное приложение Svelte https://github.com/JoshuaPelealu/100DaysOfCode/tree/master/src

Answer 1

Вы можете просто сделать:

{#each Object.keys(projects) as key}
   <Tasks {...projects[key]} />
{/each}

Answer 2

Для доступа к свойствам вы можете использовать скобки вместо записи через точку . Итак:

{#each dataLength as _, i}
      <Tasks {...projects[`Day${i}`]}/>
{/each}

(Здесь также используется литерал шаблона , но вы также можете иметь ["Days" + i])

Обратите внимание, что это будет начинаться с индекса 0, поэтому первым будет projects.Day0. Если вы хотите начать с projects.Day1, вам нужно добавить 1:

{#each dataLength as _, i}
      <Tasks {...projects[`Day${i + 1}`]}/>
{/each}