在reactjs中渲染数据时协调封装组件的道具
在reactjs中渲染数据时协调封装组件的道具
提问于 2016-07-09 01:21:11
我正在用reactJS构建一个食谱盒子。我的目标是在按钮中隐藏配料，列出食谱标题。因此，当一个人点击标题为“芝士蛋糕”的按钮时，他们将看到其各自的配料。布尔值在传达何时和何时不这样做是有意义的，因为它与"Onclick“有关。但是，我不确定在获取数据时如何协调此操作，因为我的配料数据(this.props.ingredients)包含在recipetitlebutton组件中。我尝试在标题按钮中重新初始化配料组件，以为在映射数据时可以在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'))Stack Overflow用户
发布于 2016-07-14 10:24:06
实际上我想通了。非常简单。首先，React不能识别仅使用{ setState ({setState: true})更改显示配料的值。我必须使用一个函数来显式地{setState( function (){return showIngredients:true)}。其次，为了在我的recipeTitle组件中呈现配料组件，我只需在{this.showIngredients？:"null"/>中指定道具。这样，我就可以在我的recipeTitleButton中定义配料属性了。代码如下：
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>
)
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38272268
复制相关文章
相似问题
腾讯云开发者
