在按钮单击时弹出模态组件

Question

我正在尝试在按钮单击时弹出自定义登录模式。

我的代码：

// ModalWrap.js
      <section>     
         <div className="modal fade" id="basicModal" tabIndex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
            <div className="modal-dialog" style={{maxWidth: "420px"}}>
              .....
             
             </div>
           </div>
        </section>

在我的 Index.js 文件中，我尝试调用此模式 从“react-bootstrap”导入{ Modal }；

<Modal show={isOpen} onHide={hideModal}>
    <ModalWrap/>
</Modal>

但是这里的问题，你可以看到我必须在Modal 组件中调用我的ModalWrap，有没有其他方法可以实现它。我不想在我的Index.js 中再次调用模态。

Answer 1

您可以只在此处传递道具，而不是在 ModalWrap 中定义它们。 所以在 index.js 中：

    <ModalWrap isOpen={isOpen} hideModal={hideModal}/>

而在 ModalWrap 组件内部只是这样做：

     <Modal show={props.isOpen} onHide={props.hideModal} dialogClassName="my-modal">
       // rest of code
     </Modal>