以下是文件：
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;
拼贴.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所做的只是返回它的子级。CCD_ 4由一个具有CCD_ 6列表的CCD_。并且图像数据存储在CCD_ 7状态。Image只是一个img。
加载页面后，一切正常。但当我调整窗口大小时，由于某种原因，图像正在消失。
如果你想看看这些图像是如何消失的，有一个视频。
这种行为似乎被打破了。我认为这可能是个bug。但我想让理解React的人这么说。如果不是，请描述一下。
上面的代码可能看起来很奇怪，但这只是一个可重复的最小示例。我也可以分享完整的代码。这是存储库
正如@tanmay所说，这些图像确实消失了，因为它们在onTransitionEnd={evt => evt.target.remove()}中被删除了。据我所知，这是有意的，应该发生在手机屏幕尺寸上的不透明度转换
现在，为什么在调整大小时会发生这种情况。因为font-size还有另一个跃迁，它发生在这里的html元素上。CCD_ 13是一个继承性质，因此它对CCD_ 14下的图像和每个元素都会发生变化。
该怎么做才能避免它，但保留远程转移。三种方式：
- 检查属性名称
onTransitionEnd={evt => evt.propertyName === 'opacity' && evt.target.remove()} - 明确设置要使用
.collage__img {transition-property: opacity;}转换的属性 - 用
.collage__img {font-size: initial;}使font-size不是inherit
我会选择选项2。当然不是选项3，因为这只考虑了font-size转换，并让onTransitionEnd在未来可能添加的任何其他转换上触发。