Hoe Zou U Dit Oplossen Rendering Puzzel Reageren?

0
73

Welkom, Reageren liefhebbers en amateurs zoals ik! Ik heb een puzzel voor jullie vandaag.

Laten we zeggen dat je wilde maken van een lijst van items in een kolom 2 structuur. Elk van deze items wordt een afzonderlijk onderdeel. Bijvoorbeeld, zeggen we hadden een lijst van albums en we wilden maken hen een volledige pagina 2 lijst van de kolommen. Elke “Album” is een Reageren component.

Ga rendering probleem

Neem nu het CSS framework die u gebruikt vereist dat u te maken uit een twee-kolom lay-out zoals deze…

<div class=”kolom”>
<div class=”kolom”> Kolom 1 </div>
<div class=”kolom”> Kolom 2 </div>
<div class=”kolom”>

Dit betekent dat het in orde maken van de albums correct, je moet een open kolommen div-tag, maken twee albums en sluit de tag. Dit doe je over en over totdat alle albums hebben gemaakt.

Heb ik opgelost door in te breken in stukjes en de weergave op elk ander album voorwaardelijk in een aparte render functie. Die render functie is alleen genoemd voor elk ander item.

klasse App breidt Onderdeel {
staat = {albums: [] }

async componentDidMount() {
laat data = Array.van(wachten GetAlbums());
deze.setState({ albums: data } );
}

render() {
return (
de sectie <sectie className=”section”>
{dit.staat.albums.kaart((album, index) => {
// gebruik de modulus operator te bepalen, zelfs items return index % 2 ?
deze.renderAlbums(index) : “;
})}
</section>
)
}

renderAlbums(index) {
// twee albums in een tijd – de huidige en de vorige item
laat albums = [dit.staat.albums[index – 1], dit.staat.albums[index]];

return (
<div className=”kolommen” key={index}>
{albums.map(album => {
return (
<Album={album} />
);
})}
</div>
);
}
}

Bekijk Het Volledige Project

Een andere manier om dit te doen zou zijn aan het einde van de albums array in een twee-dimensionale array en itereren over. De eerste gemarkeerde blok onder verdeelt de array. De tweede is de sterk vereenvoudigde rendering logica.

klasse App breidt Onderdeel {
staat = {albums: []}

async componentDidMount() {
laat data = Array.van(wachten GetAlbums());

// splitsing van de oorspronkelijke array in een verzameling van twee setten
de gegevens.forEach((item index) => {
if (index % 2) {
albums.push([data[index – 1], [index]]);
}
});

deze.setState({
albums: – albums
});
}

render() {
return (
de sectie <sectie className=”section”>
{dit.staat.albums.kaart((album, index) => {
return (
<div className=”kolommen”>
<Album={album[0]}></Album>
<Album={album[1]}></Album>
</div>
)
})}
</section>
)
}
}

Bekijk Het Volledige Project

Dit maakt de JSX wel een beetje, maar nu ben ik dubbel invoeren van het Album component, dat voelt gewoon verkeerd.

Sarah Drasner wees me er op dat ik niet had beschouwd als een van de meer belangrijke scenario ‘ s hier, en dat is het onbekende onder scenario.

Onbekend Bodem

Mijn beide bovenstaande oplossingen veronderstellen dat de resultaten ontvangen van de fetch is definitief. Maar wat als het nou niet?

Wat als we het streamen van gegevens van een server (ala RxJs stijl) en we weten niet hoe vaak we ontvangt een set resultaten, en we weten niet hoeveel items worden in een gegeven. Ernstig compliceert dingen en volkomen vernietigt de voorgestelde oplossingen. In feite, kunnen we verder gaan en zeggen dat geen van deze oplossingen zijn ideaal, omdat zij niet de schaal van deze zaak.

Ik voel me als de absolute eenvoudigste oplossing zou zijn om dit op te lossen in de CSS. Laat de CSS zorgen te maken over de lay-out van de manier waarop God het bedoeld heeft. Ik vind het nog steeds belangrijk om te kijken naar hoe dit te doen met JSX omdat er mensen zijn die het bouwen van toepassingen in de echte wereld, die te maken hebben met grappen en grollen zoals dit elke dag. De eisen zijn niet altijd wat we willen dat ze zijn.

Hoe Zou Je Het Doen?

Mijn vraag is gewoon dat — hoe zou je dit doen? Is er een schonere en meer efficiënte manier? Hoe kan dit gedaan worden zodat het schalen met een onbekende bodem? Een onderzoekende geest (de mijne specifiek) zou graag weten.