如何通过按钮指定数组索引调用DOM引用实现React滚动定位？

方案一：用工厂函数生成点击处理函数 #

先定义一个工厂方法，接收目标索引后返回对应的滚动处理函数，这样可以直接在按钮的onClick中指定索引：

const scrollRef = [];

// 工厂函数：接收索引，返回点击事件处理器
const getScrollHandler = (index) => () => {
  const targetElement = scrollRef[index];
  // 先判断元素是否存在，避免DOM未挂载时报错
  if (targetElement) {
    // 可选：添加平滑滚动效果，去掉则用默认瞬间滚动
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
};

按钮调用时直接传入目标索引：

<button onClick={getScrollHandler(1)}>滚动到页面底部</button>

DOM元素的引用逻辑保持不变：

<div ref={(ref) => { scrollRef[1] = ref }}>页面底部</div>

方案二：预生成索引对应的处理函数数组 #

如果需要重复使用相同索引的滚动操作，可以预先把处理函数存入数组，之后直接通过索引调用：

const scrollRef = [];

// 生成单个滚动处理函数的逻辑
const createScrollHandler = (index) => () => {
  const targetElement = scrollRef[index];
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth' });
  }
};

// 预先生成对应索引的处理函数数组
const scrollClick = [
  createScrollHandler(0), // 索引0对应的处理函数
  createScrollHandler(1), // 索引1对应的处理函数
  // 可根据需求添加更多索引的处理函数
];

此时按钮可以直接通过索引调用数组中的处理函数：

<button onClick={scrollClick[1]}>滚动到页面底部</button>

关键说明 #

• 原代码中scrollClick是单个函数而非数组，所以onClick={scrollClick[1]}会获取到undefined，导致点击无响应甚至报错。
• 添加元素存在性判断是为了避免DOM元素未挂载时调用scrollIntoView引发错误。

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