Установка начальных размеров img в состоянии - РЕАКТ - PullRequest
Новая
       65

Установка начальных размеров img в состоянии - РЕАКТ

0 голосов
/ 04 апреля 2020

Очевидно, вы не можете установить максимальную ширину img к его исходным размерам, используя только css. Я попытался реализовать его с помощью React.

Я создал общий c компонент изображения реакции: 

import React, {useState, useRef, useEffect} from 'react';
import PropTypes from 'prop-types';
import CONSTANTS from "../../CONSTANTS/CONSTANTS";

export const Picture = ({src, alt}) => {

    const [dimensions, setDimensions] = useState({});
    const {initialWidth, initialHeight} = dimensions;
    const imgRef = useRef(null);
    const setImageDimensions = () => {

        const imgNode = imgRef.current;

        const initialWidth = imgNode.naturalWidth;
        const initialHeight = imgNode.naturalHeight;
        const ratio = initialWidth / initialHeight;

        const newDimensions = {initialWidth, initialHeight, ratio};

        setDimensions(prev => {
            if (_.isEmpty(prev)) {
                prev = newDimensions;
            }
            return prev;
        })
    };

    return <img onLoad={setImageDimensions} style={initialWidth && initialHeight ? {
        maxWidth: `${initialWidth}px`,
        maxHeight: `${initialHeight}px`
    } : {}} src={src} alt={alt ? alt : ''} ref={imgRef}/>
};

Состояние размеров установлено правильно, когда загрузка img завершена , Однако встроенный стиль не применяется. Может ли кто-нибудь помочь мне здесь? Кажется, мне не хватает некоторых базовых c знаний.

Большое спасибо: -)

РЕДАКТИРОВАТЬ: у меня изначально был "initalHeight" вместо "initialHeight". Код это сейчас, работает. Однако, как указывает @Stevetro: проверка стиля НЕ нужна.

...