지도 RECT 컴포넌트 배열은 두 요소

Question

의 그룹으로 I는

var A = [<TextInput ... />, <TextInput ... />, ....] 

같은 텍스트 입력의 배열을 갖고 I 연속 안에 두 요소에 의해 이들 요소 그룹을 매핑 할. 즉,안에 포장 된 <TextInput /> 두 개를 어떻게 구현할 수 있습니까? 나는이

<Row> 
    <TextInput ... /> 
    <TextInput ... /> 
</Row> 
<Row> 
    <TextInput ... /> 
    <TextInput ... /> 
</Row> 
<Row> 
    <TextInput ... /> 
    <TextInput ... /> 
</Row> 
.... 
.... 

같은 출력 내가 루프 내부에이 코드를 시도했지만 오류가 발생합니다.

{index % 2 === 0 && <Row> } 
     <TextInput {...props} /> 
{index % 2 === 1 ? </Row>} 

나는 우리가 단지 내부 jsx이 같은

Answer 1

뭔가 일을해야 </Row>의 태그를 닫기 반환 할 수 있다고 생각합니다. 하지만 오류가있을 수 있습니다,이

render() { 
    var temp = [], arr = [] 
    while(A.length){ 
    temp.push(A.shift()) 
    A.length && temp.push(A.shift()) 
    arr.push(temp) 
    temp = [] 
    } // creates array of arrays 
    return arr.map(rowOfTwo => 
    <Row> 
    {rowOfTwo[0]} 
    {rowOfTwo.length > 1 && rowOfTwo[1]} 
    </Row> 
) 
} 

등이 아직

<div> 
    { 
    A.map((_, index) => 
     (index % 2 === 0) && 
     <Row> 
     {A[index]} 
     {A[index+1] ? A[index+1] : <div />} 
     </Row> 
    ) 
    } 
</div> 

Answer 2

var A = [ < TextInput .../>, <TextInput .../>,...] 

    let arrTwoComp = [], 
     arrComp = []; 
    A.forEach((oneComp, key) => { 

     arrTwoComp.push(oneComp); 

     if ((key + 1) % 2 === 0) { 
      arrComp.push(
       <Row>{arrTwoComp}</Row> 
      ); 
      arrTwoComp = []; 
     } 
    }) 


    //display arrComp 

    <div>{arrComp}</div> 

Answer 3

뭔가 기본적 분할 :

Answer 4

const A = [<TextInput ... />, <TextInput ... />, ....]; 
A.map((_, idx) => { 
    if (idx % 2 === 0) {    // only do this on 0 and even indexs 
    let inputs = [A[idx]];   // we'll always have an item at idx 
    const y = A[idx+1];    // but idx+1 may not exist (i.e., idx was the last item) 
    if (y) {       // if idx+1 doesn't exist, it'll be undefined, so let's avoid including it 
     inputs.push(y); 
    } 
    return (
     <Row>       // return the items (or item) wrapped in a row 
     {...inputs} 
     </Row> 
    ); 
    } 
}).filter(x => x !== undefined);  // map function has to return something, so the odd indexes will return undefined; lets filter them out now 

simple fiddle 기능을 설명을 미리 형성 테스트하지 않았습니다 콘솔 로깅을 통해.