배열에 밀어 루프를 사용하지 마십시오 번갈아

Question

내가 현재 가지고이 수행하는 코드 :

let result = [] 
const number 

for (let i = 0; i < number; i++) { 
    result.push(f(i)) 
    result.push(g(i)) 
} 

return (
    <div> 
    {result} 
    </div> 
) 

F (i) 및 g (ⅰ) 하나를 반환 내가 무엇에 따라 jsx 요소를 반응 . 우리는 소품으로 전달할 것입니다.

for 루프를 사용하지 않는 형식으로 변환하는 데 문제가 있습니다. 지도를 사용하는 방법이 있습니까? 나는 f (i)와 g (i)를 감싸고있는 추가적인 div가 필요하지 않을 것이다. 즉 나는 추가 사업부가없는의 요구가 나를지도 솔루션 또는 루프를 사용하지 않는 다른 해결책을 마련하기 위해 열심히 약간 만드는이

for (let i = 0; i < number; i++) { 
    result.push(
    <div> 
     f(i) 
     g(i) 
    </div> 
) 
} 

에 결과 상당을 가질 수 없습니다 . 아이디어가 있습니까?

Answer 1

두 항목의 배열을 반환하거나 밀어 넣을 수 있으며 spreading을 사용하여 Array#concat으로 변환 할 수 있습니다.

Array#from을 사용하여 항목을 생성했지만 for 루프를 사용하고 result을 병합 할 수 있습니다.

const f = (i) => <li key={`f${i}`}>f - {i}</li>; 
 
const g = (i) => <li key={`g${i}`}>g - {i}</li>; 
 

 
const Demo = ({ length }) => (
 
    <ul> 
 
    { 
 
    [].concat(...Array.from({ length }, (_, i) => [f(i), g(i)])) 
 
    } 
 
    </ul> 
 
); 
 

 
ReactDOM.render(
 
    <Demo length={5} />, 
 
    demo 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 

 
<div id="demo"></div>

사용 16 반응하는 경우 , 당신은 반환 할 수있는 fragment 대신 :

const f = (i) => <li key={`f${i}`}>f - {i}</li>; 
 
const g = (i) => <li key={`g${i}`}>g - {i}</li>; 
 

 
const Demo = ({ length }) => (
 
    <ul> 
 
    { 
 
    Array.from({ length }, (_, i) => (
 
     <React.Fragment key={i}> 
 
     {f(i)} 
 
     {g(i)} 
 
     </React.Fragment> 
 
    )) 
 
    } 
 
    </ul> 
 
); 
 

 
ReactDOM.render(
 
    <Demo length={5} />, 
 
    demo 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> 
 

 

 

 
<div id="demo"></div>