如何在react-table中通过编程方式滚动到指定行？

当然可以实现！我最近刚搞定这个需求，最终的方案是给每一行的Cell组件添加ref，再配合一个自定义函数来完成滚动定位。

具体来说，我先给表格的每个Cell设置了ref，并把这些ref存储在一个_rowRefs的Map集合中，这样就能通过行的唯一key快速定位到对应的DOM节点。然后用下面这个函数来处理滚动逻辑：

scrollToKeyInTable(oldKey, newKey) {
  if (newKey) {
    const node = this._rowRefs.get(newKey);
    try {
      const row = node.parentElement.parentElement.parentElement;
      const tableBodyNode = row.parentElement;
      tableBodyNode.scrollTop = row.offsetTop - 35;
      const { scrollX, scrollY } = window;
      node.focus({ preventScroll: true });
      window.scrollTo(scrollX, scrollY);
      return this;
    } catch (e) {}
  } else if (oldKey) {
    const node = this._rowRefs.get(oldKey);
    if (node) {
      node.blur();
    }
  }
}

简单拆解下这个函数的逻辑：

• 当传入目标行的newKey时，先通过Map拿到对应的Cell节点，再逐层找到整行的DOM元素
• 计算并设置表格tbody的scrollTop值，让目标行滚动到视野内（这里减35是为了给行上方留一点缓冲空间，你可以根据自己的表格布局调整这个数值）
• 调用focus时加上preventScroll: true，避免浏览器自动触发页面滚动，再手动保留当前窗口的滚动位置，确保只有表格内部发生滚动
• 如果没有目标行key但传入了oldKey，则给之前聚焦的行取消焦点

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