如何在React-Table中获取指定列的单元格值？

当然可以实现这个需求！我在实际项目中用过几种不同的方式，根据你使用的React-Table版本（尤其是v7和更早版本差异较大），这里主要分享v7版本下最常用的几种方案：

1. 通过表格Ref获取所有行的指定列值 #

如果你已经创建了表格的引用，直接通过引用访问表格实例的行模型，就能提取目标列的值：

// 先定义表格Ref
const tableRef = useRef(null);

// 编写函数获取指定列值，比如目标列id为"username"
const getTargetColumnValues = () => {
  if (!tableRef.current) return [];
  
  // 获取表格的所有行数据
  const tableRows = tableRef.current.getRowModel().rows;
  
  // 遍历行，提取目标列的值
  const columnValues = tableRows.map(row => row.getValue("username"));
  
  console.log("指定列的单元格值：", columnValues);
  return columnValues;
};

这里的row.getValue(columnId)是React-Table v7推荐的方法，不管你的列是用accessor字段还是自定义id，只要传入列的唯一标识就能准确拿到对应单元格的值，避免直接操作原始数据可能出现的字段不匹配问题。

2. 获取选中行的指定列值 #

如果你的需求是获取选中行的指定列值，可以结合useRowSelect插件的选中行状态来实现：

import { useTable, useRowSelect } from 'react-table';

// 初始化表格时启用行选择插件
const {
  getTableProps,
  getRowProps,
  headerGroups,
  rows,
  selectedFlatRows // 选中的扁平化行数据
} = useTable(
  { columns, data },
  useRowSelect
);

// 获取选中行的目标列值
const getSelectedColumnValues = () => {
  const selectedValues = selectedFlatRows.map(row => row.getValue("username"));
  console.log("选中行的指定列值：", selectedValues);
  return selectedValues;
};

3. 渲染时直接获取单元格值 #

如果是在定义列的时候就需要访问单元格值，直接在列配置的accessor或Cell渲染函数中获取即可：

const columns = [
  {
    id: "username",
    Header: "用户名",
    // accessor直接返回对应字段值
    accessor: row => row.username,
    // Cell组件中直接通过value参数拿到单元格值
    Cell: ({ value }) => <span>{value}</span>
  }
];

注意事项 #

• 确保你知道目标列的唯一标识：如果列没有显式设置id，React-Table会默认把accessor字段作为列的id，所以要对应上。
• 如果使用的是React-Table v6版本，方法会略有不同，比如通过tableRef.current.getResolvedState().data获取数据后再提取字段，但v7的方案更灵活可靠。

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