ant-design Table组件使用customRender返回渲染多个标签

在Ant Design的Table组件中，你可以使用customRender属性来自定义列的渲染内容。如果你想在一个单元格中渲染多个标签，你可以在customRender函数中返回一个React元素数组。

以下是一个简单的例子，展示了如何在一个单元格中渲染两个标签（span元素）：

import React from 'react';
import { Table } from 'antd';
 
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  // ... 更多数据
];
 
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age & Address',
    dataIndex: 'age',
    key: 'age',
    customRender: (age, record) => {
      return [
        <span key="age">{age} years</span>,
        <span key="address">{record.address}</span>
      ];
    }
  },
];
 
const App = () => (
  <Table dataSource={data} columns={columns} />
);
 
export default App;

在这个例子中，我们定义了一个customRender函数，它接受age和record参数，并返回一个包含两个span元素的数组。每个span元素都有一个独特的key属性，这是React中管理列表和Key的一个最佳实践。