如何实现TanStack Table点击一行展开所有层级子行

问题分析 #

你之前的递归函数没有生效，核心原因有两个：

1. row.getToggleExpandedHandler()仅返回一个事件处理函数，并未执行它，自然不会触发展开状态变更；
2. 即使手动执行该函数，递归调用子行的处理函数会多次异步更新状态，容易导致状态不一致，且效率低下。

TanStack Table的展开状态完全由expanded状态对象管理，正确的做法是一次性收集需要展开/收起的所有行ID，批量更新状态。

解决方案 #

步骤1：实现递归收集后代行ID的函数 #

在App组件内添加以下函数，用于获取目标行及其所有层级子行的ID：

// 递归获取某一行的所有后代行ID（包含自身）
const getAllDescendantRowIds = (row) => {
  let ids = [row.id];
  if (row.subRows?.length) {
    row.subRows.forEach(child => {
      ids = [...ids, ...getAllDescendantRowIds(child)];
    });
  }
  return ids;
};

// 切换目标行的所有层级展开/收起状态
const toggleAllDescendants = (row) => {
  const allRowIds = getAllDescendantRowIds(row);
  setExpanded(prevState => {
    const newExpanded = {...prevState};
    const isCurrentExpanded = prevState[row.id];
    
    if (isCurrentExpanded) {
      // 已展开：移除所有后代行的展开状态
      allRowIds.forEach(id => delete newExpanded[id]);
    } else {
      // 未展开：添加所有后代行的展开状态
      allRowIds.forEach(id => newExpanded[id] = true);
    }
    
    return newExpanded;
  });
};

步骤2：替换行按钮的点击事件 #

修改firstName列的cell渲染逻辑，将按钮的onClick替换为上面的toggleAllDescendants函数：

{row.getCanExpand() ? (
  <button
    {...{
      onClick: () => toggleAllDescendants(row),
      style: { cursor: "pointer" },
    }}
  >
    {row.getIsExpanded() ? "👇" : "👉"}
  </button>
) : (
  "🔵"
)}

关键说明 #

• 直接操作expanded状态对象，批量更新所有需要变更的行ID，符合TanStack Table的状态管理机制，避免了多次异步更新带来的状态不一致问题；
• 函数同时支持展开和收起的切换逻辑，保持了原有按钮的交互语义；
• 递归收集行ID的逻辑可以覆盖任意层级的子行，满足深层嵌套数据的需求。

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