如何讓模態在React中自行關閉？

Question

我有一個基本的單頁React應用程序的模式窗口。我已經構建了模態分量，像這樣：

class Modal extends Component { 
    render() { 
     return (
      <div className="Modal"> 
       <button 
        className="Modal-close" 
        onClick={this.props.closeModal}> 
        ✖ 
       </button> 
       <div 
        className="Modal-contentContainer" 
        onKeyDown={e => { 
         if (e.keyCode === 27) { 
          this.props.closeModal(); 
         } 
        } 
       }> 
        {this.props.content} 
       </div> 
      </div> 
     ); 
    } 
} 

正如你所看到的，模式的具體內容是通過內容道具過去了。但是，我希望能夠讓模態本身在認證模式的特定過程結束時調用closeModal，並且我無法弄清楚如何做到這一點。有沒有一種簡單的方法將該功能添加到內容道具？還是有一種完全不同的方式，我應該創建模態？

Answer 1

您可以使用React.cloneElement傳遞額外的屬性content元素：

class Modal extends Component { 
    render() { 

    const extendedContent = React.cloneElement(this.props.content, { 
     closeModal: this.props.closeModal 
    }); 

    return (
     <div className="Modal"> 
      <button 
       className="Modal-close" 
       onClick={this.props.closeModal}> 
       ✖ 
      </button> 
      <div 
       className="Modal-contentContainer" 
       onKeyDown={e => { 
        if (e.keyCode === 27) { 
         this.props.closeModal(); 
        } 
       } 
      }> 
       {extendedContent} 
      </div> 
     </div> 
    ); 
    } 
}