时间戳

首页 > 解决方案 > 具有动态主体的 ReactJs 引导模式

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

问题描述

我正在一个网站上工作，登录、注册和忘记密码弹出窗口会交替出现（不是一次）。所以我想创建一个具有多个正文内容组件的模式。

但我无法弄清楚如何显示这些。当我单击登录或注册按钮时，模态内容附加到模态，但不显示

页脚.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;

标签： javascriptjqueryreactjsbootstrap-modalreact-bootstrap

解决方案

  1. 在单独的文件中添加您的模态组件并将其导入页脚或页眉中。

const [content, setContent] = useState();状态为您的内容。

  1. 您需要创建一个函数来定义要显示的模态内容。您可以按如下方式传递类型：`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.
}

推荐阅读