은 중첩 루프 반작용

Question

I가 나는 등 같은 렌더링하려는 일부 그룹화 된 데이터 :

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

일반적으로, 나는이 그룹을 통해 루프를 할 것이며, 각 루프 내에서, 나는에 내부 루프를 할 것이다 각 행을 거쳐야합니다.

그러나 접근성과 관련하여 div 구조는 매우 엄격합니다. 예. div [역할 = 행 그룹] 주위의 주변 컨테이너에 던져 넣을 수는 없습니다. 즉, 각 행 그룹은 동일한 레벨에 있어야합니다.

따라서 첫 번째 반복 후에 return()을 닫고 새 Array.map()을 시작할 수 없으므로 서로 중첩 된 일반적인 Array.map()을 사용할 수 없습니다.

누구나 내가 어떻게이 아이디어를 얻을 수 있습니까?

래퍼없이 내용을 렌더링 할 수있는 래퍼 구성 요소가 있습니까? 예. {함유량}?

감사합니다. John.

Answer 1

나는이 질문을 완전히 이해하고 있는지 잘 모르겠다. 하지만 마지막 문장은 div과 같은 바깥 요소에 배치하지 않고 직접 자식을 렌더링하는 React 클래스를 작성하려고한다고 생각하게합니다. 그렇다면 가능 합니다만, 유일한 유효한 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>