cstransition react:只显示背景，不显示照片

Question

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

如果我删除了cstransition，那么它会像预期的那样运行。

这是照片查看器组件:

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;

这是PhotoZoomViewer的过渡特定的SCSS:

.enter {
opacity: 0;
&Active {
opacity: 1;
transition: all 300ms ease-in-out;
}
}
.exit {
opacity: 1;
&Active{
opacity: 0;
transition: all 300ms ease-in-out;
}
}

这是PhotoZoomViewer自己的SCSS:

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

这是photozoom背景组件:

import React from 'react';
import styles from './PhotoZoomBackdrop.module.scss';
const PhotoZoomBackdrop = ({show}) => (
show && <div className={styles.backdrop}></div> 
);
export default PhotoZoomBackdrop;

PhotoZoomBackdrop.module.scss:

.backdrop {
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.2);
}

没有CssTransition组件背景和图像得到显示，但有了cstransition背景覆盖整个页面和图像不显示。

Answer 1

我必须将JSX包含在CSSTransition中

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