基于React JS与Tanstack Table：按行状态控制按钮显隐

你不需要全局的isApproved状态，因为每行状态是独立的，直接从当前行数据源中获取status值做条件渲染即可：

1. 移除无用全局状态：删掉const [isApproved, setIsApprove] = useState(false);，它无法对应每行的独立状态。
2. 获取当前行状态：在actions列的cell回调里，通过cell.row.getValue('status')或cell.row.original.status拿到当前行的状态值。
3. 条件渲染Agenda按钮：用逻辑与运算符，仅当状态为"Approve"时渲染Agenda链接。

修改后的actions列代码如下：

{
  accessorKey: "actions",
  header: () => <span>Action</span>,
  cell: (cell: any) => {
    // 获取当前行的状态值
    const rowStatus = cell.row.getValue('status');
    return (
      <div className="inline-flex gap-x-2">
        <Link to={`./${cell.row.id}/edit`}>Edit</Link>
        <EVSDeleteButton id={cell.row.id} header="event" />
        {/* 仅当状态为Approve时显示Agenda按钮 */}
        {rowStatus === 'Approve' && (
          <Link to={`./${cell.row.id}/agenda`}>Agenda</Link>
        )}
      </div>
    );
  },
  enableSorting: false,
  enableColumnFilter: false,
},

补充提示 #

如果你的IEvent接口定义了status字段，建议把cell: (cell: any)改为cell: CellContext<IEvent, string>，获得类型提示避免any类型。

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