陣營嵌套循環

我有，我想呈現像這樣的一些分組數據：陣營嵌套循環

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

通常情況下，我會做一個遍歷組，每個循環中，我將有一個內部循環，遍歷每一行。

但是，因爲我在使用可訪問性，所以div結構非常嚴格。例如。你不能只在div [role = rowgroup]周圍放置一個周圍的容器。即每個行組需要處於相同的級別。因此，我不能使用通常的嵌套在對方內的Array.map（），因爲在第一次迭代之後，我期望關閉return（）並且不能啓動新的Array.map（）。

任何人有任何想法，我怎麼能做到這一點？

是否有一個包裝組件可以在沒有包裝的情況下渲染其內容？例如。 {內容}？

謝謝。約翰。

來源

2016-11-09 John Fu

爲什麼不只是呈現基於你的數據的相應類型的行組成部分？也就是使用一個包裝組件，而不是渲染周圍的容器只是呈現適當的元素。 –

這是非常不清楚你到底想完成什麼。我們需要更多信息。給我們一些示例代碼，示例數據，並且明確說明您的預期輸出是什麼。 – jered

我不確定我完全理解了這個問題。但是最後一句讓我相信你想寫一個React類直接渲染它的子元素，而不是像div那樣將它包裝在外層元素中？如果是這樣，這是可能的，但只有當你傳遞一個單獨的有效React組件作爲一個孩子。

以下應該工作：

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>

來源

2016-11-09 10:27:38 jered

我不確定這是我在找什麼。因爲這是一個給定的，將會有超過2個子節點，因此，通過使用這個組件，它將始終呈現一個包裝div（這正是我試圖避免的）。想象一下，如果我依靠這個嵌套TR標籤。 IE不會接受TR之間的DIV。這個解決方案將迫使我使用DIV而不是TABLE語義。 –

陣營嵌套循環

回答

相關問題