react制作图片预览弹窗，但在点击相同图片时，功能不能实现，尝试了很多方法也没解决，求助大侠！

Question

逻辑是这样的，当点击图片时，会把图片的src中的base64编码传入到弹窗中，然后图片的onload事件触发弹窗的显示,点击弹窗背景的时候关闭弹窗
问题：
1.点击相同图片时，由于图片缓存了？所以不触发onload事件；
2.要是不用onload事件的话，就不能获取图片的尺寸，也就不能设置图片居中的CSS值；
3.由于自身有通过state切换状态，所以使用生命周期的方法会出现冲突；
尝试了各种方法后，还是没能解决，在这儿求助大侠，能有什么方法解决这个问题，谢谢，么么哒！

export default class ImageView extends Component{
    constructor(props){
        super(props);
        this.state = {
            isShown: false
        };
        this.hide = this.hide.bind(this);
        this.show = this.show.bind(this);
    }
    hide(){
        let image = this.refs.image;
        image.style.marginTop = "0px";
        image.style.marginLeft = "0px";
        this.setState({isShown: false});
    }
    show(){
        let image = this.refs.image;
        this.setState({isShown: true});
        image.width >= 860? image.style.marginLeft = "-430px" : image.style.marginLeft = `-${image.width/2}px`;
        image.height >= 480? image.style.marginTop = "-240px" :image.style.marginTop = `-${image.height/2}px`;
    }
    render(){
        return (
            <div className = {this.state.isShown? `${styles.imageview} ${styles.imageview_active}`: styles.imageview} >
                <div onClick = {this.hide} className = {this.state.isShown? `${styles.backdrop} ${styles.backdrop_active}`: styles.backdrop}></div>
                <img onLoad = {this.show} ref = "image" className = {this.state.isShown? `${styles.image} ${styles.image_active}` : styles.image} src={this.props.newImageView} />
            </div>
        );
    }
}

Answer 1

没有图片尺寸也可以css垂直居中

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}