React中如何将类组件的antd Table columns配置迁移到函数组件并修复UI异常

核心问题说明 #

你不需要修改columns配置里的render字段，AntD 3.26.18的Table组件columns.render属性本身就是接收一个返回JSX的渲染函数，类组件和函数组件中该配置的写法完全一致，你主动将render替换为return是UI不符合预期的直接原因。

正确实现代码 #

import React, {useState} from 'react';
import {Table, Button, Tag} from 'antd';

// 直接复用类组件中的columns配置即可，不需要修改render逻辑
const getColumns = () => [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: tags => (
      <span>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    )
  },
];

// 自定义组件首字母必须大写，否则React会识别为原生DOM标签
const MyComp = () => {
    const columns = getColumns();
    // 确保rowData是已定义的变量，getTableData返回的数组每一项包含name、tags字段，tags为数组类型
    const dataSource = getTableData(rowData);

    return (
      <Table
        data-testid={'results-grid'}
        className="searchResultsTable"
        columns={columns}
        dataSource={dataSource}
      />
  )
}

export default MyComp;

额外注意事项 #

• 确保tags字段的值为数组类型，如果后端返回的是字符串，需要先切割为数组再传入dataSource
• 如果表格出现key重复告警，可给Table组件加rowKey="唯一字段名"属性，比如rowKey="name"（需保证name字段值唯一）

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