这是文件：
script.jsx ：（主脚本）
document.addEventListener('DOMContentLoaded', () => {
ReactDom.render(
<Body>
<Collage />
</Body>,
document.querySelector('#body'),
);
});
body.jsx：
const Body = function (props) {
return (
<>
{props.children}
</>
);
};
export default Body;
Collage.jsx：
export default class Collage extends React.Component {
constructor() {
super();
this.state = {
images: [
{ src: '/home/photos/vertical/1' },
{ src: '/home/photos/vertical/0' },
],
};
}
render() {
return (
<div className="collage">
{this.state.images.map(image => <Image src={image.src} key={Math.random()} />)}
</div>
);
}
image.jsx：
const Image = ({ src, alt }) => (
<img className="collage__img"
alt={alt}
src={`${src}.jpg`}
onTransitionEnd={evt => evt.target.remove()} />
);
Image.propTypes = {
src: PropTypes.string.isRequired,
alt: PropTypes.string,
};
Image.defaultProps = {
alt: '',
};
export default Image;
因此，script.jsx应该呈现Body和Collage组件。所有Body要做的只是返回它的孩子。在Collage由一个div与列表Image。并以Collage状态存储图像数据。该Image只是一个img。
加载页面后，一切正常。但是当我调整窗口大小时，图像由于某种原因消失了。
如果您想查看图像如何消失，则有一个视频。
此行为似乎已被破坏。我认为这可能是一个错误。但是我想对一个了解React的人说。如果不是，请描述一下。
上面的代码可能看起来很奇怪，但这只是一个最小的可复制示例。我也可以共享完整的代码。这是仓库
这些图像确实消失了onTransitionEnd={evt => evt.target.remove()}，因为@tanmay表示已将其删除。据我了解，这是有意的，应该在不透明过渡时在移动屏幕尺寸上发生
现在，为什么会在调整大小时发生这种情况。因为存在的另一种转换，font-size所以发生在此处的htmlelement上。并且是继承的属性，因此它会更改图片和下的每个元素。font-sizehtml
为避免这种情况应采取的措施，但要保持过渡时的移除状态。三种方式：
onTransitionEnd={evt => evt.propertyName === 'opacity' && evt.target.remove()}.collage__img {transition-property: opacity;}font-size不inherit与.collage__img {font-size: initial;}我会选择选项2。当然不是选项3，因为它只考虑font-size过渡，而留给onTransitionEnd将来可能添加的任何其他过渡触发。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句