矢印関数から変数を定義してコンポーネントを返す

Question

.map()の繰り返し内に変数を定義し、コンポーネントを返すことを望みます。

しかし、この変数をマップの中に入れても機能しません（エラーが出ます）。これはまったく可能なのでしょうか？もしそうなら、どうすればいいですか？

以下

は、私が何をしようとしているの簡単な例です：

render() { 
    return(
    <div> 
     {array.map((element, index) => (
     let disturbingVariable = 100 + index 
     <MyComponent disturbingVariable={disturbingVariable} /> 
    ))} 
    </div> 
) 
} 

Answer 1

矢印機能を使用すると、もはや暗黙のリターン構文を使用することができ、複数の文を持っている場合。

ブロック中括弧とreturnのステートメントを追加します。

また

array.map((element, index) => { 
    let disturbingVariable = 100 + index 
    return <MyComponent disturbingVariable={disturbingVariable} /> 
}) 

、変数宣言を見送ると、インプレース加算を行う、暗黙のリターンを維持：

また

array.map((element, index) => 
    <MyComponent disturbingVariable={100 + index} />) 

Answer 2

、あなたは省略することができ戻り値と中括弧をブロックしますが、関数本体は暗黙の戻り値を持つ1つのライナーでなければなりません：

render() { 
    return(
    <div> 
     {array.map((element, index) => <MyComponent disturbingVariable={100 + index}/>)} 
    </div> 
) 
} 

あなたは暗黙的にreturn文を使用して明示的に関数から値を返す代わりにしようとしているためですhere

Answer 3

暗黙の復帰についての詳細。 -

Notice（）は{}に変換し、return文を使用して明示的にコンポーネントを返すようにします。

render() { 
    return(
    <div> 
     {array.map((element, index) => { 
     let disturbingVariable = 100 + index 
     return <MyComponent disturbingVariable={disturbingVariable} /> 
     })} 
    </div> 
) 
}