ReactJs bootstrap модал с динамом c корпус

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

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. Добавьте ваш модальный компонент в отдельный файл и импортируйте его в нижний колонтитул или верхний колонтитул.

const [content, setContent] = useState(); Состояние для вашего контента.

Вам необходимо создать функцию, которая будет определять, какой модальный контент вы хотите отобразить. Вы можете передать тип следующим образом: `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.
}