具有動態主體的 ReactJs 引導模式

Question

我正在一個網站上工作，登錄、注冊和忘記密碼彈出窗口將交替出現（不是一次）。 所以我想創建一個具有多個正文內容組件的模式。

但我無法弄清楚如何顯示這些。 當我點擊登錄或注冊按鈕時，模態內容附加到模態，但不顯示

頁腳.js

 import React, { Component } from 'react' import ModalTemplate from './modals/ModalTemplate' class Footer extends React.Component { render() { return (<><ModalTemplate /></>) } } export default Footer

頁腳.js

 import React, { Component } from 'react' import ReactDOM from "react-dom" import LoginModalBody from './modals/LoginModalBody' import RegisterModalBody from './modals/RegisterModalBody' class Header extends Component { Login() { ReactDOM.render(<LoginModalBody />, document.getElementById('common_modal_content')); } Register() { ReactDOM.render(<RegisterModalBody />, document.getElementById('common_modal_content')); } render() { return ( <div className='fd bg_Header height_100vh p_5'> <div className='mainSize'> <div className="fd"> <div className="row m_0 p_tb_15"> <div className="col-sm-4 col-md-4"> <img className="logoSize" src={Constants.Application.PUB_URL + "/img/logo.svg"} /> <img src={Constants.Application.PUB_URL + "/img/icons/menu.svg"} className="float-right m_r_15 pointer menuIcn" width="30px" /> </div> <div className="col-sm-8 col-md-8"> <span className="pointer" onClick={this.Login}>LOGIN </span> | <span className="pointer" onClick={this.Register}>REGISTER </span> </div> </div> </div> </div> ) } } export default Header

模態模板.js

 import React, { Component } from 'react' class ModalTemplate extends React.Component { render() { return (<> <div id="common_modal" tabindex="-1" role="dialog" class="modal fade"> <div class="modal-dialog"> <div class="modal-content" id="common_modal_content"> </div> </div> </div></>); } } export default ModalTemplate;

登錄ModalBody .js

 import React, { Component } from 'react' class LoginModalBody extends React.Component { showModal() { document.getElementById('common_modal').classList.add('in') document.getElementById('common_modal').classList.add('show') } hideModal() { document.getElementById('common_modal').classList.remove('in') document.getElementById('common_modal').classList.add('hide') } componentDidMount() { this.showModal(); } render() { return (<> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div className="fd"> <h6 className="p_t_15"><b>Log in continue</b></h6> <input type="text" placeholder="Email address" className="fd m_t_15 form-control bck_ligrey bdr_0" /> <input type="text" placeholder="Password" className="fd m_t_15 form-control bck_ligrey bdr_0 brdr_grey" /> <div className="fd m_t_15"> <input type="checkbox" /> <font color="#ddd">Remember My password</font> <p className="float-right font-12 m_0">Show password</p> </div> <button type="button" className="btn fd btn_orng font-12 m_tb_10"> Log in</button> <div className="fd p_b_15 text-center"> <a href="#"><u><b>Forgot password?</b></u></a> </div> <p className="fd m_b_10 m_t_30 text-center"><span className="font-10">Don't have an account?</span> <a href="#"><b>Sign Up</b></a></p> </div> </div> </> ); } } export default LoginModalBody;

Answer 1

1. 在單獨的文件中添加您的模態組件並將其導入頁腳或頁眉。

const [content, setContent] = useState(); 聲明您的內容。

2. 您需要創建一個函數來定義要顯示的模態內容。 您可以按如下方式傳遞類型：`onClick={() => callModalComponent('login')}

您的功能將類似於：

const callModalComponent = (type: string) => {
   if(type === 'login'){
      setContent(<LoginComponent />) // set state content as per your form requirement
   } else if(type === 'register'){
      setContent(<RegisterComponent />) 
   }
   openModalContainer() // this will open your modal.
}