React类组件myRef适配改造为函数组件实现方法

核心适配规则 #

• 类组件的this.state与this.setState统一替换为useState钩子实现状态管理
• 类组件中用React.createRef()创建的ref，在函数组件中必须用useRef钩子替代，避免重渲染时ref实例重置导致引用丢失
• 类组件componentDidMount生命周期的逻辑，迁移到useEffect钩子里实现，依赖项传空数组即可保证仅在组件挂载完成后执行一次
• 原代码中手动操作DOM修改类名的逻辑可正常保留，也可优化为React推荐的状态驱动类名绑定方案，减少直接DOM操作

踩坑提醒 #

如果出现Cannot read properties of null (reading 'children')类报错，优先检查两个点：一是ref是否正确绑定到目标DOM节点，二是读取ref.current的逻辑是否放在了useEffect回调或者事件回调中（组件渲染阶段DOM还未挂载，ref.current值为null）

可直接运行的改写后代码 #

import React, { useState, useRef, useEffect } from 'react';

function SingleProduct() {
  // 状态定义
  const [products] = useState([
    {
      "_id": "1",
      "title": "Se perdio Roco",
      "src": [
        "http://flogfotos.miarroba.st/5/0/6/5779506/822.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/d/d5/Bianca_8_Meses.jpg",
        "https://sumedico.blob.core.windows.net/images/2020/08/19/perrosboxerblanco.jpg",
        "http://perros.mascotahogar.com/Imagenes/boxer-blanco.jpg"
      ],
      "zone": "Yerba Buena, Tucumán",
      "description": "Perdido desde dia sabado 17 de Junio cerca del Solar del Cerro. Lleva puesto su cadena como se ve en las fotos. Reacciona al llamado de Roco. Es muy cariñoso",
      "condition": "No Encontrado",
      "count": 1
    }
  ]);
  const [activeIndex, setActiveIndex] = useState(0);
  // 定义缩略图容器ref
  const thumbRef = useRef(null);

  // 缩略图切换逻辑
  const handleTab = (index) => {
    setActiveIndex(index);
    const images = thumbRef.current.children;
    for (let i = 0; i < images.length; i++) {
      images[i].className = images[i].className.replace("active", "");
    }
    images[index].className = "active";
  };

  // 挂载后给默认第一个缩略图加active类，替代原componentDidMount
  useEffect(() => {
    thumbRef.current.children[activeIndex].className = "active";
  }, []);

  return (
    <div className='app'>
      {products.map(item => (
        <div className='details' key={item._id}>
          <div className='big-img'>
            <img src={item.src[activeIndex]} alt=""/>
          </div>
          <div className='box'>
            <div className='row'>
              <h2>{item.title}</h2>
              <p>{item.zone}</p>
              <span>{item.condition}</span>
            </div>
            <p>{item.description}</p>
            <div className="thumb" ref={thumbRef}>
              {item.src.map((img, imgIndex) => (
                <img 
                  src={img} 
                  alt="" 
                  key={imgIndex}
                  onClick={() => handleTab(imgIndex)}
                />
              ))}
            </div>
            <button className='cart'>Ponte en contacto con el dueño</button>
          </div>
        </div>
      ))}
    </div>
  )
}

export default SingleProduct;

优化方案（推荐） #

可以去掉所有手动操作DOM的逻辑，完全通过状态控制类名，代码更简洁也更符合React设计理念，只需要做两处修改：

1. 删除useRef相关定义、删除useEffect挂载逻辑、删除handleTab里操作DOM的部分，简化后的handleTab如下：

const handleTab = (index) => {
  setActiveIndex(index);
};

2. 渲染缩略图时动态绑定className：

<img 
  src={img} 
  alt="" 
  key={imgIndex}
  className={imgIndex === activeIndex ? 'active' : ''}
  onClick={() => handleTab(imgIndex)}
/>

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