이미지의 동적 표시를위한 리얼 모드

Question

나는 반응을 사용하여 응용 프로그램을 만들고 있습니다. 모든 이미지가 동적으로 표시되는 페이지가 있습니다. 클릭 할 때 이미지가 반응 모달로 열리길 원합니다. 어떻게 그와 같은 구성 요소의 새로운 유형의 를 사용하는

Answer 1

class ImageModal extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     showModal: false 
    }; 
    } 

    setModalState(showModal) { 
    this.setState({ 
     showModal: showModal 
    }); 
    } 

    render() { 
    return (
     <div> 
     <img src={ this.props.src } onClick={ this.setModalState.bind(this, true) } /> 
     <ReactModal isOpen={ this.state.showModal }> 
      <img src={ this.props.src } onClick={ this.setModalState.bind(this, false) } /> 
     </ReactModal> 
     </div> 
    ) 
}