Javascript ReactJS。图像在调整窗口大小时消失

以下是文件：

script.jsx:（主脚本）

document.addEventListener（'DOMContentLoaded'，（）=>{
ReactDom.render(
,
document.querySelector（“#body”），
);
});

body.jsx:

const Body=函数（道具）{
返回(
{props.children}
);
};
导出默认体；

collage.jsx:

导出默认类拼贴扩展React.Component{
构造函数（）{
超级（）；
此.state={
图像：[
{src:'/home/photos/vertical/1'}，
{src:'/home/photos/vertical/0'}，
],
};
}
render（）{
返回(
{this.state.images.map（image=>）}
);
}

image.jsx:

const Image=（{src，alt}）=>(
evt.target.remove（）}/>
);
Image.propTypes={
src:PropTypes.string.isRequired，
alt:PropTypes.string，
};
Image.defaultProps={
alt:“”，
};
导出默认图像；

因此，script.jsx应该呈现

Body

和

Collage

组件。

Body

所做的只是返回它的子对象。

拼贴

由一个

div

和一组

图像组成。图像数据存储在
拼贴
状态。
图像
只是一个
img

加载页面后，一切正常。但是，当我调整窗口大小时，由于某种原因，图像正在消失

如果你想看看这些图像是如何消失的，有一个

这种行为似乎被打破了。我认为这可能是一个错误。但我想让一个理解的人这么说。如果不是，请描述一下


上面的代码可能看起来很奇怪，但这只是一个最小的可复制示例。我也可以分享完整的代码。下面是图像确实消失了，因为它们在
onTransitionEnd={evt=>evt.target.remove（）}
中被删除了，如图所示。
据我所知，这是有意的，应该发生在手机屏幕尺寸上的不透明转换

现在，为什么会发生这种情况呢。因为在
html
元素上有另一个转换，即
font-size
。而
font size
是一个继承属性，因此它会对图像和
html
下的每个元素进行更改

如何避免这种情况，但要让removalon过渡保持在原位。
三种方式：

检查属性名称
onTransitionEnd={evt=>evt.propertyName==='opacity'&&evt.target.remove（）}
使用
显式设置要转换的属性。拼贴\uu img{transition property:opacity；}
使用
使
字体大小
不
继承
。拼贴{font-size:initial；}
我会选择第二种。当然不是选项3，因为这只考虑了
font size
转换，并且让
onTransitionEnd
在将来可能添加的任何其他转换上触发。
我认为它应该与
onTransitionEnd={evt=>evt.target.remove（）}
有关，一般来说，如果您已经在使用React，那么使用domapi删除元素不是一个好主意。正确的方法是更改
状态.images
数组