は、私は現在、これを実行するいくつかのコードを持っている

Question

交互配列にプッシュするforループを使用しないでください。 。私は小道具として私を渡します。

forループを使用しない形式に変換するときに問題があります。マップを使用する方法はありますか？私は、f（i）とg（i）の回りに追加のdivがないようにする必要があります。言い換えれば、私はこの

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

と同等の結果を持つことができない私は、マップ溶液またはループのために使用していない他の解決策を考え出すするために追加のdiv要素を持っていないの要件は、それは少しハードになり。あなたはなにか考えはありますか？

Answer 1

2つのアイテムの配列を返す（またはプッシュする）ことができ、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>