Блог

Я использую ant-design в качестве библиотеки дизайна в моем проекте react. Я создал модальный компонент изображения для показа изображения.

 class ImageModal extends Component {
constructor(props) {
    super();
    this.state  = {
        showModal : props.showImage
    }
}

closeModal = (e) => {
    this.setState({ showModal : false })
}

render() {
    return (
        <Modal id='lajeet__modal' centered closable={true} visible={this.state.showModal} footer={null} width={900} height={700} 
            onCancel={(e) => this.closeModal(e)} onHide={this.close}>
            <ImageInModal>
                <img src={this.props.imageSrc} width={850} height={700} marginTop={50}></img>
            </ImageInModal>
        </Modal>
    )
}
  

}

экспортировать ImageModal по умолчанию;

При нажатии кнопки ниже я открываю компонент модального изображения

 { !this.isStartingSession ? <FormButton type="ghost" onClick={(e) => this.setShowImageStateAndUrl(e, true, 'https://picsum.photos/800')}>View Check Out Image</FormButton> : '' }
  

Я вызываю этот компонент в каком-либо другом компоненте как,

 { this.state.checkInAndOutImageUrl ? <ImageModal showImage={this.state.showImage} imageSrc={this.state.checkInAndOutImageUrl}></ImageModal> : ''}
  

Функция, которую я использую для настройки состояния,

 setShowImageStateAndUrl = (event, value, imageSrc) => {
    event.preventDefault();
    this.setState({checkInAndOutImageUrl : imageSrc});
    this.setState({showImage : value});
}
  

приведенный пример кода не так понятен. но я думаю, что ваше приложение будет исправлено с помощью следующего кода:

  { this.state.checkInAndOutImageUrl amp;amp; this.state.showImage ? 
   <ImageModal showImage={this.state.showImage} imageSrc={this.state.checkInAndOutImageUrl}></ImageModal> 
    : 
    ''}