Реагировать - присвоение ссылки через цикл массиву изображений

#arrays #reactjs #loops

#массивы #reactjs #циклы

Вопрос:

Я все еще очень новичок в этом и, вероятно, полностью переосмысливаю / усложняю вещи.

У меня есть массив изображений, которые отображаются как ожидалось. В рамках процесса сопоставления я создаю новую ссылку для каждого изображения, чтобы я мог использовать атрибут ‘current’ для получения высоты и ширины, на основе которых у меня есть троичный оператор для применения некоторого стиля. Я сомневаюсь, что это единственный или лучший способ добиться этого, и я открыт для предложений…

Теперь к проблеме. Если у меня есть одно изображение и одна ссылка, описанный выше процесс отлично работает, однако, как только я добавляю больше изображений и пытаюсь получить «текущий», он терпит неудачу. Но я могу записать в консоль свой массив ссылок, и я получаю все обратно, включая размеры изображения.

Проблема стоит передо мной, но я просто не могу понять, в чем проблема. Возможно, я просто неправильно понял, как работают ссылки и current.

Любая помощь была бы весьма признательна.

Мой код выглядит следующим образом:

 import React, { useState, useRef, useEffect, createRef } from "react";
import Images from "../images";

const IllustrationList = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    // populate with Images from Images Array
    setImages(Images);
  }, []);

  // ref array
  const imageRefs = [];
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  useEffect(() => {
    if (imageRefs.current) {
      setDimensions({
        width: imageRefs.current.naturalWidth,
        height: imageRefs.current.naturalHeight,
      });
    }
  });
  return (
    <div className="illustration-gallery">
      <ul className="cropped-images pl-0">
        {images.map((image, i) => {
          const newRef = createRef();
          imageRefs.push(newRef);
          return (
            <li className="li-illustration" key={i}>
              <a href={image.image} data-lightbox="mygallery">
                <img
                  src={image.image}
                  alt="illustrations"
                  ref={newRef}
                  className={
                    dimensions.width > dimensions.height ? "imageSize" : ""
                  }
                />
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default IllustrationList;

1. imageRefs это просто массив (ссылок), поэтому он сам по себе не будет иметь current свойства. Поскольку imageRefs определено в теле функции, оно также переопределяется при каждом цикле рендеринга. К каким размерам изображения вы хотите получить доступ / сохранить в локальном состоянии? Или вы хотите dimensions быть массивом измерений? Кроме того, функция рендеринга должна быть чистой, т. Е. Вы не должны создавать ссылки там при отображении элементов изображения.

2. Привет, Дрю, спасибо за ваш комментарий. Мне нужны размеры для всех изображений, а затем применить стиль на основе этого. Возможно, есть другой способ?

Ответ №1:

Я смог решить свою проблему.

Я думаю, что я полностью переосмыслил проблему и придумал гораздо более простое решение. Я не знаю, лучший ли это способ добиться этого, но он делает то, что я хочу / в чем я нуждаюсь.

   useEffect(() => {
let landScape = document.querySelectorAll("img");
landScape.forEach(() => {
  for (var i = 0; i < Images.length; i  ) {
    if (landScape[i].naturalWidth > landScape[i].naturalHeight) {
      landScape[i].className = "landscape";
    }
  }
});