如何在React中实现点击小图切换大图源功能？

你的原生JS写法在React里失效，核心原因是React基于状态驱动DOM更新，直接操作DOM、使用全局事件函数的方式不符合React的设计范式。下面是符合React开发模式的解决方案：

核心实现思路 #

• 用组件状态存储当前显示的大图地址
• 给每个小图绑定React规范的点击事件，点击时更新状态
• 大图的src属性直接绑定状态值，让React自动完成DOM更新

完整代码示例 #

import { useState } from 'react';

function ImageGallery() {
  // 初始化状态，默认显示第一张图的地址
  const [mainImageSrc, setMainImageSrc] = useState('https://i.ibb.co/5LdMxNp/image.jpg');

  // 小图点击处理函数
  const handleSmallImageClick = (src) => {
    setMainImageSrc(src);
  };

  return (
    <div className="header-body">
      <div className="wrapper">
        <div className="product-box">
          <div className="all-images">
            <div className="small-images">
              <img
                src="https://i.ibb.co/5LdMxNp/image.jpg"
                alt="image"
                onClick={() => handleSmallImageClick('https://i.ibb.co/5LdMxNp/image.jpg')}
              />
              <img
                src="https://i.ibb.co/TqMj09C/image-1.jpg"
                alt="image"
                onClick={() => handleSmallImageClick('https://i.ibb.co/TqMj09C/image-1.jpg')}
              />
              <img
                src="https://i.ibb.co/5LdMxNp/image.jpg"
                alt="image"
                onClick={() => handleSmallImageClick('https://i.ibb.co/5LdMxNp/image.jpg')}
              />
              <img
                src="https://i.ibb.co/5LdMxNp/image.jpg"
                alt="image"
                onClick={() => handleSmallImageClick('https://i.ibb.co/5LdMxNp/image.jpg')}
              />
            </div>
            <div className="main-images">
              {/* 大图src绑定状态值 */}
              <img src={mainImageSrc} alt="main image" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ImageGallery;

关键注意事项 #

1. 事件绑定规范：React使用驼峰式的onClick，而非原生的onclick；不能直接调用全局函数，需在组件内定义事件处理函数
2. 状态替代DOM操作：禁止直接通过document.getElementById修改DOM属性，所有视图变更都通过更新状态实现
3. 类名属性：React中用className代替原生的class属性
4. 优化重复代码：如果小图数量较多，可将图片地址存入数组，通过map循环渲染，减少冗余代码：

优化版（循环渲染小图） #

import { useState } from 'react';

function ImageGallery() {
  const imageList = [
    'https://i.ibb.co/5LdMxNp/image.jpg',
    'https://i.ibb.co/TqMj09C/image-1.jpg',
    'https://i.ibb.co/5LdMxNp/image.jpg',
    'https://i.ibb.co/5LdMxNp/image.jpg'
  ];
  const [mainImageSrc, setMainImageSrc] = useState(imageList[0]);

  const handleSmallImageClick = (src) => {
    setMainImageSrc(src);
  };

  return (
    <div className="header-body">
      <div className="wrapper">
        <div className="product-box">
          <div className="all-images">
            <div className="small-images">
              {imageList.map((src, index) => (
                <img
                  key={index}
                  src={src}
                  alt={`product-image-${index}`}
                  onClick={() => handleSmallImageClick(src)}
                />
              ))}
            </div>
            <div className="main-images">
              <img src={mainImageSrc} alt="main product image" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ImageGallery;

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