Wie Würden Sie Dieses Problem Lösen Rendering-Puzzle Reagieren?

0
63

Willkommen, Reagieren Fans und Amateure wie mich! Ich habe ein Rätsel für dich heute.

Lassen Sie uns sagen, dass Sie wollte, zu machen, eine Liste der Elemente, die in einem 2-Spalten-Struktur. Jedes dieser Elemente ist eine separate Komponente. Zum Beispiel, sagen, dass wir eine Liste der Alben und wir wollten, dass Sie eine ganze Seite in 2 Spalten Liste. Jedes “Album” ist ein Reagieren Komponente.

Scroll-rendering-problem

Jetzt davon ausgehen das CSS-framework, die Sie verwenden, erfordert, dass Sie machen Sie sich eine zwei-Spalten-layout wie dieses…

<div class=”Spalten”>
<div class=”Spalte”> Spalte 1 </div>
<div class=”Spalte”> Spalte 2 </div>
<div class=”Spalten”>

Dies bedeutet, dass, um zu machen, die Alben korrekt, öffnen Sie einen Spalten-div-tag erscheinen zwei Alben, dann schließen Sie den tag. Sie tun dies immer und immer wieder, bis alle Alben wurden gerendert.

Ich löste es, indem man das set in Stücke schneiden und Rendern auf jedem anderen album bedingt in einem separaten render-Funktion. Das render-Funktion wird nur aufgerufen, für jedes andere Element.

Klasse App extends Component {
state = {- Alben: [] }

async componentDidMount() {
let Daten = Array.aus(erwarten GetAlbums());
diese.setState ({- Alben: data } );
}

render() {
return (
<section className=”section”>
{dies.Zustand.Alben.(Karte) ((album, index) => {
// verwenden Sie den modulo-operator, um zu bestimmen, auch Gegenstände return index % 2 ?
diese.renderAlbums(index) : “;
})}
</section>
)
}

renderAlbums(index) {
// zwei Alben auf einmal – das aktuelle und das Vorherige Element
lassen Sie Alben = [.Zustand.Alben[index – 1].Zustand.Alben[index]];

return (
<div className=”columns” key={index}>
{- Alben.Karte(album => {
return (
<Album album={album} />
);
})}
</div>
);
}
}

Ansicht Die Vollständige Projekt

Ein anderer Weg, dies zu tun wäre, um brechen die Alben-array in ein zweidimensionales array und Durchlaufen. Der erste markierte block unten, teilt das array. Die zweite ist die stark vereinfachte rendering-Logik.

Klasse App extends Component {
state = {- Alben: []}

async componentDidMount() {
let Daten = Array.aus(erwarten GetAlbums());

// teilen Sie die ursprüngliche array in eine collection der beiden item-sets
Daten.forEach((item, index) => {
if (index % 2) {
Alben.push([data[index – 1], data[index]]);
}
});

diese.setState({
Alben: Alben
});
}

render() {
return (
<section className=”section”>
{dies.Zustand.Alben.(Karte) ((album, index) => {
return (
<div className=”Spalten”>
<Album album={album[0]}></Album>
<Album album={album[1]}></Album>
</div>
)
})}
</section>
)
}
}

Ansicht Die Vollständige Projekt

Dieser reinigt die JSX noch ein wenig, aber jetzt bin ich Redundant Eingabe der Album-Komponente, die fühlt sich einfach falsch.

Sarah Drasner mich darauf hingewiesen, dass ich noch nicht einmal als eine der wichtigsten Szenarien hier, und das ist das unbekannte, unten Szenario.

Unbekannter Boden

Meine beiden oben genannten Lösungen davon ausgehen, dass die Ergebnisse erhalten von der fetch wird Endpreise. Aber was, wenn es nicht?

Was ist, wenn wir von streaming-Daten von einem server (ala RxJs Stil) und wir wissen nicht, wie viele Male, erhalten wir eine Ergebnismenge, und wir wissen nicht, wie viele Elemente werden in einem gegebenen Satz. Ernst die Dinge verkompliziert und völlig zerstört die vorgeschlagenen Lösungen. In der Tat, wir könnten weiter gehen und sagen, dass keine dieser Lösungen sind ideal, weil Sie nicht Maßstab für diesen Anwendungsfall.

Ich fühle mich wie der absolute einfachste Lösung wäre hier, um dieses Update in der CSS. Lassen Sie die CSS-Gedanken über das layout, so wie Gott es beabsichtigt hat. Ich denke immer noch, es ist wichtig, zu betrachten, wie dies mit JSX, da gibt es Leute, die erstellen apps in der realen Welt, die zu tun haben mit Spielereien wie diese jeden Tag. Die Anforderungen sind nicht immer das, was wir uns wünschen.

Wie Würdest Du Es Tun?

Meine Frage ist einfach nur, dass — wie würden Sie dies tun? Gibt es einen Reiniger effizienter Weg? Wie kann dies erreicht werden, so dass es skaliert mit einer unbekannten Boden? Forschend Verstand (bei mir speziell) würde es gerne wissen.