Есть ли никакого способа создавать компоненты динамически, используя только Astro? ⇐ Javascript

[Anonymous]

Я работаю над проектом Astro, где я строю классический Pokédex. У меня есть компонент pokemoncard.astro, который отдает подробности покемонов, и я пытаюсь динамически загрузить больше покемонов, когда нажимается кнопка «загружать больше». Тем не менее, в настоящее время я создаю элементы HTML вручную в JavaScript, который чувствует себя избыточным, так как у меня уже есть компонент PokemonCard (я пытался повторно использовать свой компонент в сценарии, но он не работает). < /P>
Есть ли способ динамического создания и отображения компонентов Astro (например, PokemonCard) в браузере без ручного создания элементов HTML? Если нет, то какой подход лучше всего этого? < /P>
Вот код: < /p>

Код: Выделить всё

---
import Layout from '../layouts/Layout.astro';
import PokemonCard from '../components/PokemonCard.astro';
import { getPokemons } from '../lib/controllers/pokemonController';
import type { PokemonSmall } from '../lib/models/pokemonModels';

const pokemons: PokemonSmall[] | undefined = await getPokemons(0, 12);
---




md:grid-cols-4">
{
pokemons?.map((pokemon : PokemonSmall) => (

))
}



Cargar más pokémons






import { getPokemons } from "../lib/controllers/pokemonController";
import { TypeColors, type PokemonSmall, type PokemonType } from "../lib/models/pokemonModels";
import { capitalizeFirstLetter, mapId } from "../lib/utils/utils";

let offset = 12;
const limit = 12;

const loadMorePkmn = document.getElementById('load-more-pkmn');
if(loadMorePkmn) {

loadMorePkmn.addEventListener('click', async () => {

const pokemons : PokemonSmall [] | undefined = await getPokemons(offset, limit);
offset += 12;

const pokemonGrid = document.getElementById('pokemon-grid');

const divPokemons = document.createElement('div');
divPokemons.className = 'grid grid-cols-2 gap-7 p-2 md:grid-cols-4';

pokemons?.map((pokemon : PokemonSmall) => {

console.log(pokemon)

const a = document.createElement('a');
a.className = 'w-60 h-60 p-1 flex flex-col items-center bg-slate-400/10 border-gray-500 border rounded-2xl hover:bg-gray-200 cursor-pointer';
const image = document.createElement('img');
image.className = 'w-28';
const h3 = document.createElement('h3');
h3.className = 'text-2xl font-bold tracking-wide mt-1';
const p = document.createElement('p');
p.className = 'text-xs tracking-wide p-1';
const divTypes = document.createElement('div');
divTypes.className = 'flex flex-row space-x-1 mt-2 p-1 gap-2';

a.href = `pokemon/${pokemon.id}`;
image.src = pokemon.image; image.alt = `Una foto de ${pokemon.name}`;
a.appendChild(image);
h3.innerText = capitalizeFirstLetter(pokemon.name);
a.appendChild(h3);
p.innerText = `No.  ${mapId(pokemon.id)}`;
a.appendChild(p);

pokemon.types.map((types : PokemonType) => {

const pType = document.createElement('p');
pType.className = ` ${TypeColors[types.type.name]} opacity-80 rounded text-white text-center font-medium tracking-wide py-1 px-2`;
pType.innerText = types.type.name;
divTypes.appendChild(pType);

});
a.appendChild(divTypes);

divPokemons.appendChild(a);
});

pokemonGrid?.appendChild(divPokemons);
});
}

Я думал об использовании фронтальной структуры, такой как React или Vue, но я хотел бы придерживаться Astro, если это возможно.


Подробнее здесь: https://stackoverflow.com/questions/793 ... only-astro