为所有网站界面创建共享对话框组件

Question

我正在使用Primereact的Dialog组件，并且在我需要的每个接口中实现它，这是我知道的错误方式，因此我想为此创建共享组件。 但我迷失了如何管理父子组件之间的动作和状态，例如如何触发父组件中的动作一致。

import React, { Component } from 'react';
import { Dialog } from 'primereact/components/dialog/Dialog';
export default class Popup extends React.Component {
constructor(props) {
  super(props);
  this.agree = this.agree.bind(this);
  this.cancel = this.cancel.bind(this);
  this.state = {
    visible: false,    
  };
}
cancel(event) {
    this.setState({ visible: false });
  }
  agree(event) {

  }
render() {

    return (
        <div><Dialog header="Delete Confirmation" visible={this.state.visible} width="350px" modal={true} onHide={() => this.cancel} maximizable={true} blockScroll={true}>
            Are you sure you want to delete?
      <div className="footerDialog">
                <a className="cancelDialog BtnTrade2   AdvSerachBtn fleft  marginr10" icon="pi pi-times" onClick={this.cancel} >NO</a>
                <a className="agreeDialog BtnTrade  AdvSerachBtn  fleft marginL8" icon="pi pi-check" onClick={this.agree} >YES</a>

            </div>

        </Dialog></div>
    )
}

}