Javascript CST转换反应：仅显示背景，不显示照片

我有一个组件，当用cstranition单击照片时，它会被渲染。它也有一个背景组件，但单击后只显示背景

如果我删除CSTranslation，那么它的行为与预期的一样

以下是照片查看器组件：

import styles from './PhotoZoomViewer.module.scss';
import { CSSTransition } from 'react-transition-group';
import transitions from './PhotoZoomViewerTransition.module.scss';
import PhotoZoomBackdrop from './PhotoZoomBackdrop/PhotoZoomBackdrop';


const PhotoZoomViewer = ({ show, photoUrl, onExit}) =>  (
     <CSSTransition in={show} timeout={500} classNames={transitions} unmountOnExit>
         <PhotoZoomBackdrop show={show} />
        <div className={styles.photoZoomViewer}>
            <img className={styles.zoomedImage} src={photoUrl} alt={photoUrl} onClick={onExit} />
        </div>
    </CSSTransition>
);

export default PhotoZoomViewer;

import React from 'react';
import styles from './PhotoZoomBackdrop.module.scss';

const PhotoZoomBackdrop = ({show}) => (
    show && <div className={styles.backdrop}></div> 
);

export default PhotoZoomBackdrop;

以下是PhotoZoomViewer自己的SCS：

.photoZoomViewer {
    z-index: 300;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: zoom-out;
}

下面是PhotoZoomBackdrop组件：

import styles from './PhotoZoomViewer.module.scss';
import { CSSTransition } from 'react-transition-group';
import transitions from './PhotoZoomViewerTransition.module.scss';
import PhotoZoomBackdrop from './PhotoZoomBackdrop/PhotoZoomBackdrop';


const PhotoZoomViewer = ({ show, photoUrl, onExit}) =>  (
     <CSSTransition in={show} timeout={500} classNames={transitions} unmountOnExit>
         <PhotoZoomBackdrop show={show} />
        <div className={styles.photoZoomViewer}>
            <img className={styles.zoomedImage} src={photoUrl} alt={photoUrl} onClick={onExit} />
        </div>
    </CSSTransition>
);

export default PhotoZoomViewer;

import React from 'react';
import styles from './PhotoZoomBackdrop.module.scss';

const PhotoZoomBackdrop = ({show}) => (
    show && <div className={styles.backdrop}></div> 
);

export default PhotoZoomBackdrop;

---

没有

cstranition

组件背景和图像显示，但是cstranition背景覆盖了整个页面，图像没有显示。

我不得不将JSX包含在

cstranition

中的一个div中：

const PhotoZoomViewer = ({ show, photoUrl, onExit}) =>  (
     <CSSTransition in={show} timeout={500} classNames={transitions} unmountOnExit>
    <div>
         <PhotoZoomBackdrop show={show} />
        <div className={styles.photoZoomViewer}>
            <img className={styles.zoomedImage} src={photoUrl} alt={photoUrl} onClick={onExit} />
        </div>
    </div>
    </CSSTransition>
);

constphotozoomviewer=（{show，photoUrl，onExit}）=>(
);