简单的反应状态示例。父组件是App,它最初只是显示一个按钮,单击该按钮时它应该呈现AllRecipes
(这可以正常工作,并且我能够管理AllRecipes的状态)。内部AllRecipes
是一个需要触发状态更改然后进一步渲染的ingredients
按钮(单击该按钮时不执行任何操作,它需要切换配料的状态)。我认为这是一个关于如何管理状态的非常好的小例子,但我缺少一些东西。
var App = React.createClass({
getInitialState: function(){
return {showIngredients: false, showRecipes: false};
},
toggleRecipes: function(){
this.setState({showRecipes: !this.state.showRecipes})
},
toggleIngredients: function(){
this.setState({showRecipes: !this.state.showRecipes})
},
render: function() {
var recipes = this.state.showRecipes ? <Recipes/> : null;
return (
<div>
<h1> Recipe App </h1>
<button onClick={this.toggleRecipes}> Show Recipes </button>
{recipes}
</div>
);
}
});
var Recipes = React.createClass({
render: function() {
var ingredients = this.props.showIngredients ? <Ingredients/> : null;
return (
<div>
<h1> list of recipes </h1>
<ul>
<li> Chicken Soup </li>
<li> Chicken Wings </li>
<button onClick={this.props.toggleIngredients}> Show Recipes </button>
{ingredients}
</ul>
</div>
);
}
});
var Ingredients = React.createClass({
render: function() {
return (
<div>
<h1> List of Ingredients </h1>
<ul>
<li> Salt </li>
<li> Pepper </li>
</ul>
</div>
);
}
});
React.render(<App/>, document.body);
它看起来像你不及格toggleIngredients
到Recipes
。尝试改变
var recipes = this.state.showRecipes ? <Recipes/> : null;
到
var recipes = this.state.showRecipes ? <Recipes toggleIngredients={this.toggleIngredients} /> : null;
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句