antd Table组件column的render函数参数text、record代表什么含义

运行逻辑 #

render是antd Table列配置中用于自定义单元格渲染的钩子函数，Table组件遍历dataSource数组渲染每一行时，会对每一列的render函数做一次调用，你可以在函数内返回任意React节点（文本、组件、DOM结构等），返回的内容会直接渲染到当前行对应的单元格位置，替代默认的字段值渲染逻辑。

入参说明 #

• text：当前列绑定字段的原始值，和该列配置的dataIndex属性对应，即当前行record对象中dataIndex指定字段的取值。如果当前列没有配置dataIndex，该参数值为undefined。
• record：当前行的完整数据对象，对应dataSource数组中正在遍历的当前项，包含该行的所有字段数据，可用于跨字段的渲染逻辑判断。

示例代码 #

import { Table, Tag, Button } from 'antd';

const DemoTable = () => {
  const columns = [
    {
      title: '员工姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '出勤状态',
      dataIndex: 'attendanceStatus',
      key: 'attendanceStatus',
      // text是当前行attendanceStatus字段的值，record是当前行完整员工数据
      render: (text, record) => {
        return text === 'on' ? <Tag color="green">在职</Tag> : <Tag color="orange">休假中</Tag>
      }
    },
    {
      title: '操作',
      key: 'action',
      // 无dataIndex配置，text为undefined，用_占位即可
      render: (_, record) => {
        return <Button type="link" onClick={() => console.log('编辑员工ID：', record.id)}>编辑</Button>
      }
    }
  ];

  const dataSource = [
    { id: 1, name: '张三', attendanceStatus: 'on' },
    { id: 2, name: '李四', attendanceStatus: 'off' }
  ];

  return <Table columns={columns} dataSource={dataSource} rowKey="id" />
};

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