forループはReact-JSXでは使用できないのはなぜですか？

Question

私はこのコードスニペットが許可されていない理由を理解しようとしています：

<tbody>{ 
for (var i=0; i < objects.length; i++) { 
    <ObjectRow obj={objects[i]} key={i}> 
} } 

、なぜこの1が許可されている：私はそれが届かない

<tbody> 
    {objects.map(function(object, i){ 
     return <ObjectRow obj={object} key={i} />; 
    })} 
</tbody 

... 助けてくれてありがとう！

Answer 1

これは、JSXはその内部に表示されるオブジェクトを返すことを期待しているからです。 forループは何も返しませんが、マップは返します。

あなたはJSXでこの

const getObjects =() => { 
    const objs = [] 
    for (var i=0; i < objects.length; i++) { 
    objs.push(<ObjectRow obj={objects[i]} key={i}>) 
    } 

    return objs; 
} 

<tbody>{getObjects()} 

Answer 2

のようなものを持っていた場合、あなたは中括弧の中に式（値を生成する）を渡す必要がforループを作ることができます。しかし、forループは文です（アクションを実行します）。

さらに、for-loopで試したことは、有効なjavascriptではありません。

Answer 3

ループforループは値を返しません。 forループは単純にで、アレイ内の各項目に対して何かを実行します。

一方、mapは、新しい配列のReact要素を返します。例えば

：

function giveMeAnArrayPlease() { 
    // Doesn't do anything, just loops through the array 
    var array = ['Hey', 'Hi', 'What's up']; 
    for (var i = 0; i < array.length; i++) { 
    array[i]; 
    } 
} 

VS

function giveMeAnArrayPlease() { 
    // Returns a nice uppercase array 
    var array = ['Hey', 'Hi', 'What's up']; 
    return array.map(word => word.toUpperCase()); 
} 

地図戻り大文字の単語のすべての新しい配列。 Reactは要素の配列をとり、例のように要素に変換できますが、 'undefined'を取って要素に変換することはできません。

Answer 4

他にも触れたように、forループはオブジェクトを返しませんが、.mapはオブジェクトを返します。これはまた、.filterまたは.reduceを使用できることを意味します。

JSXの外部でforループを使用して、作成したオブジェクトを渡すことができます。これは、JSXのスプレッド演算子を使用してリターンする前に、React Component Classのrenderメソッドで実行できます。ここに例があります：

render() { 
    const objs = [] 
    for (var i=0; i < objects.length; i++) { 
     objs.push(<ObjectRow obj={objects[i]} key={i}>) 
    } 

    return (
     <div> {...objs} </div> 
    ) 
}