如何基于reactjs中的错误将相同的组件用于不同的内容

Question

我想根据错误的状态使用相同的组件显示不同的内容。在这种情况下，我使用带有上载和取消按钮的组件（名为“对话框”）来上载内容。当我上传时，我检查上传是否有错误。如果是这样，我想使用相同的组件“对话框”向用户显示相应的错误消息。为此，我设置了一个名为error的状态，并在出错时将其设置为true，在没有错误时将其设置为false。有没有一种方法可以根据错误状态使用具有不同内容的相同组件“对话框”来显示。

下面是代码段，

export default class Dialog extends React.Component {
constructor(props) {
    super(props);
    this.element = document.createElement('div');

render() {
    return ReactDOM.createPortal(
        this.props.children,
        this.element
    );
}

}

在使用模式组件的上传组件中

class Upload extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        error: false,
    };
}

render =（）=> {         返回（                                                   

上传内容

                                                                         取消                   上载                            ）}}

如何根据错误状态将对话框组件与不同的内容一起使用。有人可以帮忙吗谢谢。