Question

我有一个如下的父组件。我在这里有一个名为View的按钮。

class DataTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
          modalOpen: false,
        };

        this.view = this.view.bind(this);
    }
    view() {
        this.setState({ modalOpen: true });
    }
    render() {
        return (
            <div>
                <button className="mini ui button" onClick={this.view}>
                    <i className="user icon"></i>
                    View
                </button>
                <ModalBody modelStatus = {this.state.modalOpen}/>
            </div>
        ) 
    }
}

我有一个像下面这样的子组件

class ModalBody extends Component {
    state = { modalchildOpen: false }
    componentDidMount() {
        if(this.props.modelStatus) {
            this.setState({ modalchildOpen: true })
            console.log('yes')
        }
        else {
            this.setState({ modalchildOpen: false })
            console.log('no')
        }
    } 
    render() {
        return (
            <div>
                <Modal open={this.state.modalchildOpen}/>
            </div>
        ) 
    }   
}

我想在点击按钮modalchildOpen时将false的状态从true更改为View。在另一个操作中，我想在子组件中将modalchildOpen的状态从true更改为false。

Answer 1

我同意@lustoykov关于你通常如何通过状态设置模态打开/关闭值。但是，如果要根据从父级传递的props更新状态，那么您可能正在寻找的是componentWillReceiveProps生命周期方法。此方法在您的子组件接收道具的任何时候运行，您可以将旧道具与新道具进行比较。然后，您可以在该函数内设置状态。

参考此链接： https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

请注意，此生命周期方法的更新版本名为getDerivedStateFromProps。请务必检查您的版本，看看是否可以使用新方法，因为旧方法最终会被弃用。

Answer 2

我使用下面的代码解决了这个问题。

componentWillReceiveProps(nextProps){  
      this.setState({
        modalchildOpen: nextProps.modelStatus,
    })
}

谢谢大家。

更改react.js的子组件中状态变量的状态

2 个答案: