子组件无法触发状态更改

Question

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

子组件无法触发状态更改

Child Component is not able to trigger state change

javascript

state

reactjs