带有动态主体的ReactJs引导程序模态

Question

我正在一个网站上，其中会交替显示登录，注册和忘记密码的弹出窗口（不是一次）。因此，我想创建一个包含多个身体内容组件的模态。

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

Footer.js

import React, {
  Component
} from 'react'
import ModalTemplate from './modals/ModalTemplate'

class Footer extends React.Component { <
  ModalTemplate / >
}

export default Footer

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

Answer 1

我绝对想输入一条消息，感谢您在本网站上写的可爱的事实。我特别漫长的Internet查找现在已经获得了丰富的知识，可以和我的两个朋友一起去学习。我要重复一遍，我们大多数网站访问者实际上很幸运能够与许多具有实用基础知识的可爱个体一起生活在一个有用的网络中。我很幸运能遇到您的整个网页，并期待在这里阅读更多无数的分钟。再次感谢everything