具有动态主体的 ReactJs 引导模式

Question

I am working on a website where login, register and forgot password popups will appear alternatively (not at a time). So I want to create a modal with multiple body content components.

But I am unable to figure out how to display those. When I click on login or register button Modal content is attaching to modal, but not displaying

Footer.js

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

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

ModalTemplate.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;

LoginModalBody .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. Add your modal component in separate file and import that in Footer or Header.

const [content, setContent] = useState(); State for your content.

2. You need to create a function that will define which modal content you want to display. You can pass type as follows: `onClick={() => callModalComponent('login')}

Your function will be like:

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.
}