Не подскажете как правильно на Реакте в компоненте написать? Я

Question

Не подскажете как правильно на Реакте в компоненте написать? Я

раньше только на JavaScript писал. В зависимости
от размера экрана рассчитывается adaptiveWidth и adaptiveHeight. adaptiveWidth - это рассчитанная ширина изображения, которое
запрашивается в итоге у сервера. ratio - это переменная, чтобы пропорцию картинки соблюсти (высота-ширина). В зависимости от ширины экрана пользователя, разная ширина будет рассчитана и передана Api параметром. У меня, наверное, по перформансу здесь беда - при каждом рендере расчет будет происходить наверное. Как правильно написать?

const deviceSizes = [300, 400, 500, 600, 700, 800, 900, 1150]; // это на самом деле импортируется из файла с константами. Одно из этих значений будет выбрано,
это srcset короче если.

const NextImage = ({
src,
width,
height,
alt,
layout,
objectFit,
...rest
}) => {

const {
width: screen,
} = useAdaptive();

const ratio = width / height;
const adaptiveWidth = (deviceSizes.reduce((prev, curr) => (Math.abs(curr - screen) < Math.abs(prev - screen) ? curr : prev)));
const adaptiveHeight = adaptiveWidth / ratio;

return (
<Image
loader={({ src: imageSrc, width: imageWidth }) => fetchApi(imageSrc, imageWidth)}
src={src}
alt={alt}
width={adaptiveWidth}
height={adaptiveHeight}
layout={layout}
{...rest}
/>
);
};

#javascript #programming #russian

0

17.11.2021

1 ответов

15 просмотров

Андрей Гуртовой · Accepted Answer

Андрей Гуртовой

Я ничего не понял. Скажи кратко, какую проблему пытаешься решить

0

17.11.2021

169 похожих чатов

Не подскажете как правильно на Реакте в компоненте написать? Я

1 ответов

Похожие вопросы