table展示数据是管理后台常见的数据展示方式，通过table可以极为便捷的将数据展示给管理员查看。

那么在react中使用antdeaign的table组件如何在render中进行数据的循环渲染呢？

文中就来介绍如何在render中使用map循环渲染展示数据。

import { useState,useEffect } from "react";
import React from 'react';
import { Table,Tag } from "antd";
export default function overviewPage() {
  const tableColumns = [
  	{ title: 'ID', dataIndex: 'id', align:'center'},
  	{ title: '标签', dataIndex: 'tags', align:'center',
  	  render: (text: any, record: any) => record.tagsData.map((item, index) => {
  		  return <Tag color="#2db7f5"> {item['name']} </Tag>
  		})
  	}
  ];
  const tableData = [
  	{id:1,tagsData:[{name:'标签1',name:'标签2'}]}
  ]
  return (
    <div className="base_page">
		<Table
			columns={tableColumns}
			dataSource={tableData}
			pagination={false}
		 />
    </div>
  );
}

如上述tableColumns可以看出在render使用map循环return出进行渲染数据。