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;

子组件无法触发状态更改

1 个答案: