Реагируйте, компонент изображения модальный (ant-design) не рендерит второй раз - PullRequest
Новая
       45

Реагируйте, компонент изображения модальный (ant-design) не рендерит второй раз

1 голос
/ 22 марта 2019

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

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;

При нажатии кнопки ниже, я открываю компонент Image Modal 

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

1 Ответ

0 голосов
/ 22 марта 2019

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

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