本文介绍在 react 与 tanstack table（v8+）中，如何基于每行数据的 `status` 字段条件性渲染按钮（如“agenda”），无需全局状态，直接通过 `cell.row.original` 访问当前行数据实现精准控制。
在 TanStack Table 中，每个 cell 渲染函数都可获取完整的行上下文（cell.row），其中 cell.row.original 即为该行原始数据对象。因此，判断某列按钮是否显示，不应依赖组件级状态（如 isApproved）——该状态无法反映每行独立的 status 值，反而会导致所有行行为同步，违背需求。
正确做法是在 actions 列的 cell 渲染器中，直接读取当前行的 status 字段，并使用逻辑与运算符（&&）进行条件渲染。例如，仅当 status === "Approved" 时显示 “Agenda” 链接：
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
{
accessorKey: "actions",
header: () => <span>Action</span>,
cell: (cell) => {
const row = cell.row.original;
return (
<div className="inline-flex gap-x-2">
<Link to={`./${row.id}/edit`}>Edit</Link>
<EVSDeleteButton id={row.id} header="event" />
{row.status === "Approved" && (
<Link to={`./${row.id}/agenda`}>Agenda</Link>
)}
</div>
);
},
enableSorting: false,
enableColumnFilter: false,
}⚠️ 注意事项：
- ✅ 使用 cell.row.original.status（而非 cell.getValue()），因为 status 是独立字段，getValue() 在 accessorKey: "actions" 列下返回 undefined；
- ✅ 字符串匹配需严格一致（如 "Approved" vs "approve" 或 "approved"），建议统一后端返回格式，或添加 .toLowerCase() 安全处理（如 row.status?.toLowerCase() === "approved"）；
- ❌ 避免在 cell 中调用 useState 或副作用（如 console.log(isApproved)），这会破坏 Table 的纯渲染特性，引发性能问题或错误；
- ? 若需支持多状态逻辑（如 "Approved" 和 "Published" 均显示 Agenda），可改用数组包含判断：["Approved", "Published"].includes(row.status)。
总结：TanStack Table 的单元格渲染本质是函数式、按行隔离的。善用 cell.row.original 可以简洁、高效、可预测地实现行级交互逻辑，是构建动态表格操作栏的核心实践。
