React Hooks入门：如何在循环中获取点击元素的offsetTop？

嘿，这个问题我之前刚踩过坑！你现在遇到的问题根源在于单个useRef无法绑定循环里的多个元素——当循环执行完毕后，node.current只会指向最后一个被赋值的<div>，所以不管你点击哪个元素，拿到的都是最后一个元素的offsetTop。

给你两种简单靠谱的解决方案：

方法一：直接通过事件对象获取当前元素（推荐） #

不需要额外使用useRef，直接利用点击事件的currentTarget就能拿到当前绑定事件的元素，代码更简洁：

import React from 'react';

{Array.from({ length: 10 }).map((item, i) => (
  <div className='sw-tab' key={i} onClick={(event) => {
    // currentTarget始终指向绑定点击事件的那个div，哪怕你点的是里面的span
    const currentElement = event.currentTarget as HTMLDivElement;
    console.log(currentElement.offsetTop);
  }} >
    <span>1111{i}</span>
  </div>
))}

这里用event.currentTarget而不是event.target，是因为如果用户点击的是内部的<span>，target会指向<span>，而currentTarget始终是绑定了点击事件的外层<div>，更符合你的需求。

方法二：使用Ref数组（适合需要提前操作元素的场景） #

如果之后你需要提前引用这些元素（比如初始化时做一些操作），可以用useRef保存一个数组，把每个元素的ref存入对应索引的位置：

import React, { useRef } from 'react';

// 创建一个Ref数组，初始化为空数组
const nodesRef = useRef<HTMLDivElement[]>([]);

{Array.from({ length: 10 }).map((item, i) => (
  <div 
    className='sw-tab' 
    key={i} 
    // 用回调ref把元素存入数组的对应索引
    ref={element => nodesRef.current[i] = element!} 
    onClick={() => {
      console.log(nodesRef.current[i]?.offsetTop);
    }} 
  >
    <span>1111{i}</span>
  </div>
))}

这种方式可以让你在组件的任何地方通过索引访问到对应的元素，不过如果只是单纯获取点击元素的offsetTop，方法一足够用啦~

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