Ant Design React Table自定义行组件如何获取对应行record数据

Ant Design React 的 Table 组件在渲染自定义body行组件时，会自动将当前行绑定的业务数据record作为组件prop注入，无需通过index反查数据源。

推荐实现方式 #

直接从EditableRow的入参中解构record字段即可获取对应行的业务数据：

const EditableRow = ({ index, record, ...domProps }) => {
  // 此处的record即为当前行绑定的完整业务数据，可直接在行组件逻辑中使用
  console.log('当前行数据:', record);

  // 仅将DOM兼容的属性透传给tr标签，避免业务属性被传到DOM节点触发React告警
  return <tr {...domProps} />;
};

注意事项：必须将record从需要透传到<tr>标签的属性集合中分离，不要把业务数据作为DOM属性传递，否则会触发React非标准属性的控制台告警，同时也能避免行样式、事件绑定这类Table内部注入的属性被意外覆盖。

兜底实现方式 #

如果遇到版本兼容类的边缘问题，出现record未正常透传到行组件的情况，可以结合Table配置的rowKey规则、传入的dataSource，通过行的index值映射对应的数据：

// 在外层作用域维护完整的表格数据源
const tableData = [/* 业务数据列表，和传入Table的dataSource保持一致 */];

const EditableRow = ({ index, ...domProps }) => {
  // 透传异常时使用该方式取数，排序、筛选、分页场景下，index和dataSource的对应关系是稳定的
  const currentRecord = tableData[index];
  return <tr {...domProps} />;
};

注意事项：该方式仅为兜底方案，优先使用直接解构props的方式，避免在筛选、排序、动态分页场景下，因为行顺序变化导致index映射的数据错位。

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