React geschachtelten Schleifen

Question

Ich habe einige gruppierten Daten, die ich mag eine solche machen würden:

RowGroupTableHeader 
RowGroup1 
RowGroup1-row1 
RowGroup1-row2 
RowGroup2 
RowGroup2-row1 
RowGroup2-row2 
RowGroup3-row3 

Normalerweise würde ich eine Schleife durch die Gruppen tun, und innerhalb jeder Schleife, würde ich eine interne Schleife haben gehe durch jede der Zeilen.

Da ich jedoch mit Barrierefreiheit arbeite, sind div-Strukturen sehr streng. z.B. Sie können nicht einfach einen umgebenden Container um div [role = rowgroup] einwerfen. d.h. jede Zeilengruppe muss auf demselben Niveau sein.

Als solche kann ich nicht die übliche Array.map() ineinander verschachtelt, weil nach der ersten Iteration erwartet wird, dass ich die return() schließen und eine neue Array.map() nicht starten kann.

Wer hat irgendwelche Ideen, wie ich das erreichen kann?

Gibt es eine Wrapper-Komponente, die ihren Inhalt ohne Wrapper rendern kann? z.B. {Inhalt}?

Danke. John.

Answer 1

Ich bin mir nicht sicher, ob ich die Frage vollständig verstehe. Aber Ihr letzter Satz führt mich zu der Annahme, dass Sie eine React-Klasse schreiben möchten, die ihr Kind direkt rendert, ohne es in ein äußeres Element wie div einzubetten? Wenn dies der Fall ist, ist dies möglich, aber NUR, wenn Sie als Kind eine EINZIGE gültige React-Komponente übergeben.

Die folgende sollte Arbeit:

class Foo extends React.Component { 
    constructor(props){ 
     super(props); 
    } 
    render() { 
     if(React.Children.count(this.props.children) === 1){ 
       // If there is only one child, return it directly, unwrapped 
       return React.Children.only(this.props.children); 
     } else { 
       // Otherwise, return all children wrapped in div 
       return <div className="foo">{this.props.children}</div> 
     }  
    } 
} 

... 

// Later on... 

<Foo><div>Hello, world!</div></Foo> 
// Would render simply as 
// <div> 
//  Hello, world! 
// </div> 

<Foo><div>Bar</div><div>Baz</div></Foo> 
// Would render as 
// <div class="foo"> 
//  <div>Bar</div> 
//  <div>Baz</div> 
// </div>