React在同一組件中渲染多個模塊

Question

我是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> 

是否應在空括號中的數值 - > openModal（）& closeModal（）？

Answer 1

一位朋友幫我解決了這個問題。代碼的上半部分保持不變，改變的是在模式建設（一些真正有用的審美變化也給「HTML」製造）：

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

      <li style={tabs}> 
      <button 
       onClick={() => this.openModal('login')} 
       style={openButton}> 
       Enter 
      </button> 
      </li> 

      <li style={tabs}> 
      <button 
       onClick={() => this.openModal('calendar')} 
       style={openButton}> 
       Calendar 
      </button> 
      </li> 

      <li style={tabs}> 
      <button 
       onClick={() => this.openModal('team')} 
       style={openButton}> 
       Meet Us 
      </button> 
      </li> 

     </ul> 
     </div> 


     <Modal 
     style={modalCont} 
     isOpen={this.state.activeModal === 'login'}> 
     <p>1!</p> 
      <button onClick={this.closeModal} 
      style={xButton}>x</button> 
     </Modal> 

     <Modal 
     style={modalCont} 
     isOpen={this.state.activeModal === 'calendar'}> 
     <p>2!</p> 
      <button onClick={this.closeModal} 
      style={xButton}>x</button> 
     </Modal> 

     <Modal 
     style={modalCont} 
     isOpen={this.state.activeModal === 'team'}> 
     <p>3!</p> 
      <button onClick={this.closeModal} 
      style={xButton}>x</button> 
     </Modal> 

    </header> 

如果任何人能提供詳盡的解釋，請做所以！此外，還有另一種方法可以使用「綁定」來實現，但我不知道如何。