Question

我在我的React项目中使用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;

点击下面按钮的下面，我将打开图像模态组件

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

Answer 1

提供的示例代码不太清楚。但我认为您的应用将通过以下代码进行修复：

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

反应，图像模态（蚂蚁设计）组件第二次不渲染

1 个答案: