主页 / 问题 / 753751
Accepted
epsilon
Asked:2020-12-05 01:30:31 +0000 UTC2020-12-05 01:30:31 +0000 UTC

如何在反应中改变另一个组件的状态

  • 772

有两个组件

首先

class AddRecipe extends React.Component {
    constructor(props) {
        super(props);
        this.state = {show: this.props.show}
    }
    render() {
        if (this.state.show) {
            return (
                <div className="add-area"></div>
            )
        }
        else 
            return(<nothing />)
    }
}

第二

class Project extends React.Component {
    constructor(props) {
        super(props);
        this.changeShowAddArea = this.changeShowAddArea.bind(this);
        this.state = {showAddArea: false};
    }
    changeShowAddArea() {
        this.setState({
            showAddArea: true
        })

    }
    render() {
        return(
            <div className="container">
                <RecipeArea />
                <Button bsStyle="primary" onClick={this.changeShowAddArea} id="add">
                    Add a recipe
                </Button>
                <AddRecipe show={this.state.showAddArea}/>
            </div>
        );
    }
}

当我点击按钮 this.state.showAddArea 发生变化，但 AddRecipe 没有显示，我该如何解决这个问题？

javascript

1 个回答

  1. Best Answer

    无需将 props 复制到 state

    class AddRecipe extends React.Component {
    render() {
        if (this.props.show) {
            return (
                <div className="add-area"></div>
            )
        }
        else 
            return null;
    }
}

    如果您已经复制了它们，那么它们需要及时更新componentWillReciveProps。

    • 2

相关问题