reactjs - React，图像模态（ant-design）组件没有第二次渲染

Question

我在我的反应项目中使用 ant-design 作为设计库。我创建了一个用于显示图像的图像模式组件。

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

标签： reactjsreact-nativeantdreact-props

Answer 1

提供的示例代码不是很清楚。但我认为您的应用程序将通过以下代码修复：

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