如何在nextjs中单击将数据从一个组件发送到另一个组件

Question

我在nextjs中工作。我想在其他组件中单击按钮时显示弹出窗口。 在modal.js中，我有两个popup。我必须向modal.js发送参数，以显示哪个popup.i尝试发送道具，但必须添加要显示的popup的条件。

modal.js

 class PopUpModal extends Component {
     state = {
         visibleModal: false,
         visibleSecondModal: false
     }
     constructor(props) {
         super(props);             
     }
    showModal() {
         console.log('showmodal');
     }
     render() {
         console.log(this.props.showModalPopup);
      <React.Fragment>
            <Modal
                visible={this.state.visibleModal}
                onOk={() => this.showModal('Modal1', false)}
                onCancel={() => this.showModal('Modal1', false)}
                position="center">
                <div className="modal">
                    //show modal1
                </div>
            </Modal>
            <Modal
                visible={this.state.visibleSecondModal}
                onOk={() => this.showModal('Modal2', false)}
                onCancel={() => this.showModal('Modal2', false)}
                position="center">
                <div className="modal">
                   //show modal2
                </div>
            </Modal>
          </React.Fragment>
         )
     }
 }
 export default PopUpModal;

// app.js

 showModal(type, visible) {
    console.log(type, visible);
    if (type == "Modal1") {
        PopUpModal.showModal();

        this.setState({ visibleFirstModal: visible });

        console.log(this.state.visibleSMSModal);
    } else if (type == "Modal2") {
        this.setState({ visibleSecondModal: visible });
     }
    this.state.show = [type, visible];
    // this.PopUpModal.showModal();
 }

 <div className="action-column">
      <span className="action-icons"><a><Icon className="icon" type="message" onClick={() => this.showModal('Modal1', true)}></Icon>SMS</a></span>
      <span className="action-icons"><a><Icon className="icon" type="tablet" onClick={() => this.showModal('Modal2', true)}></Icon>Push</a></span>
 </div>
 <PopUpModal showModalPopup={this.state.show}></PopUpModal>