リアクションマップの混乱

Question

リアクションコンポーネントでマップ機能を使用するときは、マップ機能とちょっと混乱します。 Appコンポーネントからレシピデータが渡されるレシピコンポーネントがあります。ここで

APPのCOMPONENT

<Recipes recipes={recipes} /> 

レシピCOMPONENT

export default class Recipes extends Component { 
    // THIS FUNCTION IS RETURNING NOTHING 
    renderRecipes() { 
    return this.props.recipes.map((recipe) => { 
     <h1>{recipe.name}</h1> 
    }); 
    } 
    render() { 
    let recipe = this.props.recipes.map((recipe) => { 
     return (
     <h1>{recipe.name}</h1> 
    ); 
    }); 
    return(
     <div> 
     // CALLING THE FUNCTION HERE DOES NOT WORK 
     { this.renderRecipes() } 
     // HOWEVER CALLING THE VARIABLE DOES WORK 
     { recipe } 
     </div> 
    ); 
    } 
} 

私は混乱しています場所です。 map関数を作成する関数は何も返されませんが、map関数を移動し、recipe変数の出力をrender()内に代入すると問題なく動作します。 renderRecipesにはなぜmapの機能が返されますか？

Answer 1

あなたはmap体内に何かを返すされていないので、このようにそれを使用します。{}がマップに必要とされる場合

renderRecipes() { 
    return this.props.recipes.map((recipe, i) => <h1 key={i}> {recipe.name} </h1>); 
} 

：

renderRecipes() { 
    return this.props.recipes.map((recipe, i) => { 
     return <h1 key={i}> {recipe.name} </h1> 
    }); 
} 

または{}を削除しますか？

あなたには、いくつかの計算をしたいか、いくつかの条件に基づいて異なる要素を返すようにしたい場合は、あなたが1つだけを返すようにしたい条件場合は、ここで、その後いくつかの変数を定義し、使用するスコープを作成するために{}を使用ここでは{}は必要ありません。

注：を各要素に割り当てる必要があります。ここではインデックスを使用しますが、レシピオブジェクトの一意のプロパティを使用することをお勧めします。