Reactjs React在同一组件中渲染多个模态

一般来说，我对反应和编码都是新手。我试图在同一个组件中渲染多个模态，但它们都在同一时间渲染，因此看起来所有链接都在最后一个模态中渲染文本。
在这里设置状态：

class Header extends React.Component {
  constructor () {
    super();
    this.state = {open:false}
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.handleModalChangeEnter = this.handleModalChange.bind(this, true);
    this.handleModalChangeLogin = this.handleModalChange.bind(this, false);
  }
  openModal () {
    this.setState({open: true}); }
  closeModal () {
    this.setState({open: false}); }
  render() {

下面是模态结构：

return (
    <header style={home}>

    <div style={hello}>
      <img style={logo} src='public/ycHEAD.png'/>
      <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
    </div>

    <div style={subContainer}>
      <ul style={modalDirectory}>

        <Button onClick={this.openModal}
                style={openButton}>
          <li><a style={tabs}>Enter
              </a></li>
        </button>
        <Modal style={modalCont}
               isOpen={this.state.open}>
              <button onClick={this.closeModal}
                      style={xButton}>x</button>
        </Modal>

        <button onClick={this.openModal} 
                style={openButton}>
          <li><a style={tabs}>Login
              </a></li>
        </button>
        <Modal style={modalCont}
               isOpen={this.state.open}>
          <p>Account</p>
          <button onClick={this.closeModal}
                  style={xButton}>x</button>
        </Modal> 

返回(
埃里温所有科技活动的日历

进入

x
登录

帐目

x

---

空括号->openModal（）&closeModal（）中是否应该有一个值？

一位朋友帮我解决了这个问题。代码的上半部分保持不变，模态结构中有什么变化（对“html”也做了一些真正有帮助的美学变化）：

返回(
埃里温所有科技活动的日历


this.openModal（'login'）}
样式={openButton}>
进入


this.openModal（'calendar'）}
样式={openButton}>
历法


this.openModal（'team'）}
样式={openButton}>
迎接我们


一!

x
二!

x
三!

x

---

如果其他人可以提供详细的解释，请提供！另外，还有另一种方法可以使用“绑定”来完成此操作，但我不知道如何进行。

您可以用两种方法来完成。
1） 简单但不可缩放：为每个模式维护不同的状态变量和函数。例如

this.state = {openModal1:false, openModal2:false}
this.openModal1 = this.openModal1.bind(this);
this.closeModal1 = this.closeModal1.bind(this);
this.openModal2 = this.openModal2.bind(this);
this.closeModal2 = this.closeModal2.bind(this); 

正如我们所看到的，这个问题是代码的冗余

2） 使用功能消除冗余：维护功能以更改模式的内容

class Header extends React.Component {
  constructor () {
    super();
    this.state = {open:false, ModalContent:''}
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.handleModalChangeEnter = this.handleModalChange.bind(this);
    this.handleModalChangeLogin = this.handleModalChange.bind(this);
  }
  openModal () {
    this.setState({open: true}); }
  closeModal () {
    this.setState({open: false}); }
  handleModalChange1() {
    this.setState({ ModalContent : '<h1>Modal1 Content</h1>' 
  }
  handleModalChange2() {
    this.setState({ ModalContent : '<h1>Modal2 Content</h1>' 
  }
  render() {

类头扩展React.Component{
构造函数（）{
超级（）；
this.state={open:false，ModalContent:'}
this.openModal=this.openModal.bind（this）；
this.closeModal=this.closeModal.bind（this）；
this.handleModalChangeCenter=this.handleModalChange.bind（this）；
this.handleModalChangeLogin=this.handleModalChange.bind（this）；
}
openModal（）{
this.setState（{open:true}）；}
closeModal（）{
this.setState（{open:false}）；}
handleModalChange1（）{
this.setState（{ModalContent:'Modal1 Content'
}
handleModalChange2（）{
this.setState（{ModalContent:'Modal2 Content'
}
render（）{

模态构造应为：

return (
<header style={home}>

<div style={hello}>
  <img style={logo} src='public/ycHEAD.png'/>
  <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
</div>

<div style={subContainer}>
  <ul style={modalDirectory}>

    <button onClick={this.handleModalChange1}
            style={openButton}>
      <li><a style={tabs}>Enter
          </a></li>
    </button>
    <button onClick={this.handleModalChange2} 
            style={openButton}>
      <li><a style={tabs}>Login
          </a></li>
    </button>
    <Modal style={modalCont}
           isOpen={this.state.open}>
      <div dangerouslySetInnerHTML={{__html: this.state.ModalContent}} />
      <button onClick={this.closeModal}
              style={xButton}>x</button>
    </Modal> 

返回(
埃里温所有科技活动的日历

进入

登录

x

return (
<header style={home}>

<div style={hello}>
  <img style={logo} src='public/ycHEAD.png'/>
  <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
</div>

<div style={subContainer}>
  <ul style={modalDirectory}>

    <button onClick={this.handleModalChange1}
            style={openButton}>
      <li><a style={tabs}>Enter
          </a></li>
    </button>
    <button onClick={this.handleModalChange2} 
            style={openButton}>
      <li><a style={tabs}>Login
          </a></li>
    </button>
    <Modal style={modalCont}
           isOpen={this.state.open}>
      <div dangerouslySetInnerHTML={{__html: this.state.ModalContent}} />
      <button onClick={this.closeModal}
              style={xButton}>x</button>
    </Modal>