阵营嵌套循环

我有，我想呈现像这样的一些分组数据：阵营嵌套循环

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语义。 –

阵营嵌套循环

回答

相关问题