ReactJS. Изображения исчезают при изменении размера окна - PullRequest
Новая
       54

ReactJS. Изображения исчезают при изменении размера окна

1 голос
/ 03 августа 2020

Вот файлы:

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;

Итак, скрипт .jsx должен отображать компоненты Body и Collage. Все, что делает Body, просто возвращает своих потомков. Collage состоит из одного div со списком Image. И данные изображений хранятся в состоянии Collage. Image - это просто img.

Когда страница загружается, все работает нормально. Но когда я изменяю размер окна, изображения по какой-то причине исчезают.

Если вы хотите увидеть, как исчезают изображения, есть видео .

Такое поведение кажется нарушенным. Думаю, это может быть ошибка. Но я хочу, чтобы так сказал кто-то, кто разбирается в React. Если нет, опишите, пожалуйста.

Приведенный выше код может выглядеть странно, но это всего лишь минимально воспроизводимый пример. Я также могу поделиться полным кодом. Вот репозиторий

1 Ответ

1 голос
/ 06 августа 2020

Изображения действительно исчезают, потому что они удалены в onTransitionEnd={evt => evt.target.remove()}, как говорит @ tanmay . Насколько я понимаю, это сделано намеренно и должно происходить на мобильных экранах при переходе непрозрачности здесь

Теперь, почему это могло произойти при изменении размера. Потому что есть другой переход, font-size, который происходит в html элементе здесь . А font-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;}

Я бы go с вариантом 2. Конечно, не вариант 3, поскольку он учитывает только переход font-size и оставляет onTransitionEnd для срабатывания при любом другом переходе, который может быть добавлено в будущем.

...