且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在反应中将prop值分配给状态

更新时间:2023-02-09 14:18:45

您在OverlayView组件中缺少componentWillReceiveProps(props)方法.

You are missing componentWillReceiveProps(props) method in your OverlayView component.

export default class OverlayView extends React.Component {
    constructor (props){
        super(props);
        this.state = {open: props.isOpen}
    }

    componentWillReceiveProps(props) {
        this.setState({open: props.isOpen});
    }

    render() {
        let open = '';
        if (this.state.open === true) {
            open = 'open';
        }

        let overlayClass = `overlay overlay-slidedown ${open}`;

        return (    
            <div className={overlayClass} onClick={this._closeOverlay}>
                <div className="overlay-menu-wrapper">
                    <span>{open}</span>
                </div>
            </div>
       );
    }
}

完整的工作示例: https://codesandbox.io/s/35wLR4nA