reactjsでデータをレンダリングするときにカプセル化されたコンポーネントの小道具を調整する

Question

私はreactJSでレシピボックスを構築しています。私の目的は、レシピのタイトルを記載したボタン内の成分を隠すことです。したがって、「チーズケーキ」というタイトルのボタンをクリックすると、それぞれの成分が表示されます。 「オンクリック（Onclick）」に関連しているため、これをやりなおさないとき、いつ通信するかのブール値は意味をなさない。しかし、私の成分データ（this.props.ingredients）がレシピエントボタンコンポーネントに関与していることを前提に、データをフェッチするときにこのアクションをどのように調整するかはわかりません。私は、タイトルボタン内の成分コンポーネントを再初期化しようとしましたが、データをマップしたときにrecipeTitleButton内で定義することができます。しかし、これはうまくいかず、きれいに感じられませんでした。とにかく、これは理にかなっていると思います。どんな助けでも大歓迎です。 おかげ

var recipes = [{ 
    recipe_title: "Cheesecake", 
    ingredients: "cream cheese, graham crackers, butter, eggs" 
}, { 
    recipe_title: "Lasagna", 
    ingredients: " ricotta cheese, ground beef, pasta shells, parsely" 
}, { 
    recipe_title: "Spaghetti", 
    ingredients: "noodles, pasta sauce, ground beef" 
}] 

var RecipeTitleButton = React.createClass({ 
    getInitialState: function() { 
    return { 
     showIngredients: false 
    } 
    }, 
    onClick: function() { 
    this.setState({ 
     showIngredients: true 
    }) 
    }, 
    render: function() { 
    <Ingredients ingredients={this.props.ingredients}/> 
    return (
     <div> 
     <button type="button" className="recipe_title_button" class="btn btn=primary btn-lg">{this.props.recipe_title}</button> 
     {this.state.showIngredients ? <Ingredients/>: null} 
    </div> 
    ) 
    } 
}) 

var Ingredients = React.createClass({ 
    render: function() { 
    return (
     <div id="ingredients" className="recipe_title_ingredients"> 
     {this.props.ingredients} 
    </div> 
    ) 
    } 
}) 

var MainRecipeDisplay = React.createClass({ 
    getInitialState: function() { 
    return { 
     recipeDataObject: recipes 
    } 
    }, 
    render: function() { 
    var Pages = this.state.recipeDataObject.map(function(recipeContents) { 
<RecipeTitleButton recipe_title={recipeContents.recipe_title} ingredients={recipeContents.ingredients}/> 
    }) 
    return (
     <div> 
     {Pages} 
    </div> 
    ) 
    } 
}) 

ReactDOM.render(<MainRecipeDisplay/>, document.getElementById('content')) 

Answer 1

あなたが実際の要素のいずれかにクリックハンドラを渡していないことが表示されます。したがって、RecipeTitleButtonにonClickメソッドを定義しましたが、これを何も渡していません。この解決策はおそらく、<button>要素にプロパティonClick={/* The function that you want to fire on click */}を渡すだけで簡単です。

まず、クリックハンドラーの名前をonClickHandlerのように変更してください。クリックハンドラーは、イベントの引数を指定して呼び出されます。イベントの伝播を防ぐ必要がある場合、またはクリックハンドラーにどのボタンがクリックされたかを把握させる必要がある場合など、目的については必要ない可能性があります。

その後RecipeTitleButtonためrender関数は次のようになります。あなたが迷っている場合は

render: function() { 
    <Ingredients ingredients={this.props.ingredients}/> 
    return (
    <div> 
     <button type="button" className="recipe_title_button" onClick={this.onClickHandler.bind(this)} class="btn btn=primary btn-lg">{this.props.recipe_title}</button> 
     {this.state.showIngredients ? <Ingredients/>: null} 
    </div> 
) 
} 

コンテキストではなく、ウィンドウの、RecipeTitleButtonコンポーネントのままであるように、我々はthisに関数をバインドします。

ああ、さておきとして、実際に私はそれを考え出したあなたがJSFiddle

Answer 2

に入れた場合、これをテストするために容易になるだろう。非常に簡単でした。最初に、Reactは単なる{setState（{showingredients：true}）でsetState値を変更することを認識しません。私はこの明示的な{setState（function（）{return showIngredients：true}}を行うために関数を使用しなければなりませんでした。次に、recipeTitleコンポーネント内のコンポーネントコンポーネントをレンダリングするために、{this.showIngredients？ ： "null" />このようにして、私はrecipeTitleButton内で原料propを定義することができました。コードは以下のとおりです：

var recipes = [{ 
    title: "Cheesecake", 
    ingredients: "cream cheese, graham crackers, butter, eggs" 
}, { 
    title: "Lasagna", 
    ingredients: " ricotta cheese, ground beef, pasta shells, parsely" 
}, { 
    title: "Spaghetti", 
    ingredients: "noodles, pasta sauce, ground beef" 
}] 

var Layout = React.createClass({ 
    getInitialState: function() { 
    return { 
     recipeDataObject: recipes, 
     showIngredients: false 
    } 
    }, 
    render: function() { 
    var recipeContents = this.state.recipeDataObject.map(function(currentRecipe) { 
     return (
     <RecipeTitleButton title={currentRecipe.title} ingredients={currentRecipe.ingredients}/> 
    ) 
    }) 
    return (
     <div> 
     {recipeContents} 
     </div> 
    ) 
    } 
}) 

var RecipeTitleButton = React.createClass({ 
    getInitialState: function() { 
    return { 
     showIngredients: false 
    } 
    }, 
    handleRecipeButtonClick: function() { 
    **this.setState(function() { 
     return { 
     showIngredients: true 
     }** 
    }); 
    }, 
    render: function() { 
    return (
     <div> 
     <button type="button" onClick={this.handleRecipeButtonClick.bind(this)} className="recipe_button">{this.props.title}</button> 
     **{this.state.showIngredients && <Ingredients ingredients={this.props.ingredients}/>}** 
    </div> 
    ) 
    } 
}) 

var Ingredients = React.createClass({ 
    render: function(){ 
    return(
    <div className= "ingredients_list"> 
     {this.props.ingredients} 
    </div> 
    ) 
    } 
})