React Уплотненных петель

Question

У меня есть некоторые сгруппированные данные, которые я хотел бы вынести, как, например:

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

Обычно, я бы сделал петлю через группу, и в течение каждого цикла, я бы иметь внутреннюю петлю к пройдите через каждую из строк.

Однако, поскольку я работаю с доступностью, структуры div очень строги. например. вы не можете просто выбросить окружающий контейнер вокруг div [role = rowgroup]. т. е. каждая группа строк должна быть на одном уровне.

Как таковой, я не могу использовать обычный Array.map(), вложенный друг в друга, потому что после первой итерации я должен закрыть return() и не могу запустить новый Array.map().

У кого-нибудь есть идеи, как я могу это достичь?

Есть ли там оберточный компонент, который может отображать его содержимое без оболочки? например. {Содержание}?

Спасибо. John.

Answer 1

Я не уверен, что полностью понимаю вопрос. Но последнее предложение заставляет меня поверить, что вы хотите написать класс 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>