时间戳

首页 > 解决方案 > React - 通过循环将 ref 分配给图像数组

arrays - React - 通过循环将 ref 分配给图像数组

问题描述

我对此仍然很陌生，并且可能完全过度思考/过度复杂的事情。

我有一组按预期显示的图像。作为映射过程的一部分，我为每个图像创建一个新的 ref，以便我可以利用“当前”属性来检索高度和宽度，基于此我有一个三元运算符来应用一些样式。我怀疑这是实现这一目标的唯一或最佳方法，我愿意接受建议......

现在来解决问题。如果我有一个图像和一个参考，则上述过程效果很好，但是，一旦我引入更多图像并尝试获取“当前”它就会失败。但是我可以控制台记录我的 ref 数组，然后我会得到所有的东西，包括图像的尺寸。

问题正盯着我看，但我根本无法弄清楚问题是什么。可能只是我误解了参考资料和当前的工作方式。

任何帮助将不胜感激。

我的代码如下：

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;

标签： arraysreactjsloops

解决方案

我能够解决我的问题。

我想我完全想多了这个问题，想出了一个更简单的解决方案。我不知道这是否是实现这一目标的最佳方式，但它可以满足我的需求。

  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";
    }
  }
});

推荐阅读