React商品展示组件中如何获取图片元素的src属性？

你需要把每张图片的src作为参数传递给点击函数，这样才能让useState获取到对应图片的地址来更新主图。具体修改如下：

步骤1：修改状态更新函数 #

让setImage接收一个参数，用来接收点击图片的src：

function setImage(imgSrc) {
  setInsertImage(imgSrc);
}

步骤2：给每个点击事件传递图片地址 #

在每个包裹图片的<div>的onClick中，用箭头函数把对应图片的src传给setImage：

<div className="w-96" onClick={() => setImage("/images/camaro.jpg")}>

修改后的完整代码 #

import { useState } from "react";

function App() {
  const [insertImage, setInsertImage] = useState("/images/camaro.jpg");

  function setImage(imgSrc) {
    setInsertImage(imgSrc);
  }

  return (
    <div className="flex flex-col gap-3 max-w-3xl m-auto">
      <div className="w-full">
        <img src={insertImage} className="h-full w-full" alt="主展示图" />
      </div>
      <div className="flex gap-2">
        <div className="w-96" onClick={() => setImage("/images/camaro.jpg")}>
          <img
            src="/images/camaro.jpg"
            className="transition-opacity delay-75 hover:opacity-70 cursor-pointer active:scale-95"
            alt="camaro"
          />
        </div>
        <div className="w-96" onClick={() => setImage("/images/mclaren.jpg")}>
          <img
            src="/images/mclaren.jpg"
            className="transition-opacity delay-75 hover:opacity-70 cursor-pointer active:scale-95"
            alt="mclaren"
          />
        </div>
        <div className="w-96" onClick={() => setImage("/images/gtr.jpg")}>
          <img
            src="/images/gtr.jpg"
            className="transition-opacity delay-75 hover:opacity-70 cursor-pointer active:scale-95"
            alt="gtr"
          />
        </div>
        <div className="w-96" onClick={() => setImage("/images/mclaren.jpg")}>
          <img
            src="/images/mclaren.jpg"
            className="transition-opacity delay-75 hover:opacity-70 cursor-pointer active:scale-95"
            alt="mclaren"
          />
        </div>
      </div>
    </div>
  );
}

export default App;

额外优化建议（可选） #

如果后续要添加更多图片，重复写代码会很麻烦，可以把图片地址放到数组里，用map循环渲染小图：

import { useState } from "react";

function App() {
  const [insertImage, setInsertImage] = useState("/images/camaro.jpg");
  // 把所有图片地址存到数组里
  const imageList = [
    "/images/camaro.jpg",
    "/images/mclaren.jpg",
    "/images/gtr.jpg",
    "/images/mclaren.jpg"
  ];

  function setImage(imgSrc) {
    setInsertImage(imgSrc);
  }

  return (
    <div className="flex flex-col gap-3 max-w-3xl m-auto">
      <div className="w-full">
        <img src={insertImage} className="h-full w-full" alt="主展示图" />
      </div>
      <div className="flex gap-2">
        {/* 循环渲染所有小图 */}
        {imageList.map((src, index) => (
          <div key={index} className="w-96" onClick={() => setImage(src)}>
            <img
              src={src}
              className="transition-opacity delay-75 hover:opacity-70 cursor-pointer active:scale-95"
              alt={`商品图${index + 1}`}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Mateen