どのようにして、反復でモーダルを閉じることができますか？

Question

私は基本的な1ページの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

あなたはcontent要素に追加のプロパティを渡すためにReact.cloneElementを使用することができます。

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