在不受控制的Modal良好做法中使用getDerivedStateFromProps

Question

我希望能够将所有隐藏和显示逻辑包含在错误组件中，并且仅在这样的应用中出现错误时才传递错误模态的初始显示。

class App extends React.Component {
    render() {
       return (
          <div>
             <ErrorModal show={!!this.state.error} message={this.state.error.message/>
          </div>
       )
     }
 }

然后在我的ErrorModal中，通过使用getDerivedStateFromProps处理错误模态。

class ErrorModal extends React.Component {
    static defaultProps = {
        title: 'Error',
        onClose: () => {}
    };

    state = { show: this.props.show };

    static getDerivedStateFromProps(nextProps, previousState) {
        if(nextProps.show !== previousState.show) {
            return {show: nextProps.show};
        }

        return { show: previousState.show };
    }

    onClose = () => {
        this.setState({
            show: false
        }, this.props.onClose());
    };



    render() {
        const { message, children, title } = this.props;

        return (
            <GenericPopup show={this.state.show} className='error-modal'>
                <GenericPopup.Header>
                    <GenericPopup.Title>{title}</GenericPopup.Title>
                </GenericPopup.Header>
                <GenericPopup.Body>
                    { message ? message : children }
                </GenericPopup.Body>
                <GenericPopup.Footer>
                    <a href="javascript:void(0)" className='btn-primary close' onClick={this.onClose}>Okay, Got it.</a>
                </GenericPopup.Footer>
            </GenericPopup>
        )
    }
}

这是getDerivedStateFromProps的正确用法吗？还有其他方法无需完全控制我的组件吗？