反应。图片在 window 调整大小时消失

Question

这是文件：

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 所做的只是 returns 它是 children。 Collage 由一个 div 和 Image 的列表组成。图像数据存储在 Collage 状态。 Image 只是一个 img.

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

如果你想看，图像是如何消失的，这里有video。

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

上面的代码可能看起来很奇怪，但这只是一个最小的可重现示例。我也可以分享完整的代码。这是 repository

Answer 1

图像确实消失了，因为它们在 onTransitionEnd={evt => evt.target.remove()} 中被删除，正如 @tanmay 所说。据我了解，这是故意的，应该发生在移动 screen-sizes 不透明度过渡 here

上

现在，为什么调整大小时会发生这种情况。因为 font-size 的另一个转换发生在 html 元素 here 上。 font-size 是继承的属性，因此它会针对图像和 html 下的每个元素发生变化。

如何避免这种情况，但保留移除过渡。三种方式：

检查属性名称 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 会触发将来可能添加的任何其他转换。

反应。图片在 window 调整大小时消失

ReactJS. Images disappear on window resize

javascript

resize

reactjs