时间戳

首页 > 解决方案 > 反应JS。图像在窗口调整大小时消失

javascript - 反应JS。图像在窗口调整大小时消失

问题描述

这是文件：

script.jsx：（主脚本）

document.addEventListener('DOMContentLoaded', () => {
    ReactDom.render(
        <Body>
            <Collage />
        </Body>,
        document.querySelector('#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>
        );
    }

图像.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 的人这么说。如果不是，请描述一下。

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

标签： javascriptreactjsresize

解决方案

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

现在，为什么在调整大小时会发生这种情况。因为还有另一个过渡， of font-size，发生在htmlelement here上。Andfont-size是一个继承的属性，因此它会针对图像和html.

怎么做才能避免它，但在过渡时保留移除。三种方式：

  1. 检查属性名称onTransitionEnd={evt => evt.propertyName === 'opacity' && evt.target.remove()}
  2. 显式设置要转换的属性.collage__img {transition-property: opacity;}
  3. 使font-size 不inherit与.collage__img {font-size: initial;}

我会选择选项 2。当然不是选项 3，因为这仅考虑了font-size过渡，并onTransitionEnd在未来可能添加的任何其他过渡上触发。

推荐阅读