reaktiv-virtualisiert - Ist es möglich, endlos Scroll-Gruppen der Liste?

Question

Nach dem Lesen der Dokumentation bin ich mir nicht sicher, ob react-virtualized diesen Anwendungsfall unterstützt.

Sagen wir, ich habe einige Daten nach Datum gruppiert.

[ 
    { 
    date: 'Monday', 
    data: { 
     item1: "item1", 
     item2: "item2", 
     item3: "item3", 
     // and more .. 
    } 
    }, 
    { 
    date: "Tuesday", 
    data: { 
     item1: "item1", 
     item2: "item2", 
     item3: "item3", 
     // and more .. 
    } 
    } 
] 

Ist es möglich, zu verwenden react-virtualized mit InfiniteLoader und List, so etwas zu machen:

<div> 
    <div> 
    <div class="day">Monday</div> 
    <div>item1</div> 
    <div>item2</div> 
    <div>item3</div> 
    <!-- and more... --> 
    </div> 
    <div> 
    <div class="day">Tuesday</div> 
    <div>item1</div> 
    <div>item2</div> 
    <div>item3</div> 
    <!-- and more... --> 
    </div> 
</div> 

oder ist das Markup hat eben sein?

Answer 1

Das Markup muss nicht flach sein, solange nur ein Stammknoten pro Zeile vorhanden ist.

Zum Beispiel, überprüfen Sie this demo (Quelle here). Jede reaktiv-virtualisierte Zeile in dieser Strukturansicht enthält 1-zu-viele untergeordnete Elemente, je nachdem, ob sie erweitert wurden.