子组件无法触发状态更改

Question

简单的反应状态示例。父组件是 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);

Answer 1

您似乎没有将toggleIngredients 传递给Recipes。尝试改变

var recipes = this.state.showRecipes ? <Recipes/> : null;

到

var recipes = this.state.showRecipes ? <Recipes toggleIngredients={this.toggleIngredients} /> : null;