如何从antd中的数据动态创建列？答案

【问题标题】：How to create columns dynamically from data in antd?如何从antd中的数据动态创建列？
【发布时间】：2021-09-26 13:08:48
【问题描述】：

我想使用 antd 创建一个可重用的数据表组件，其中列从数据动态创建。我该怎么做？

这是我的代码：

 const data= [
  {
    key: 1,
    name: 'Jack',
    email:'jack@gmail.com',
    address: 'Dhaka'
  },
  {
    key: 2,
    name: 'jon',
    email:'jon@gmail.com',
    address: 'Dhaka'
  }
];

const TableContainer = (props) => {
  const { columns, data, loading } = props;

  return <Table columns={columns} dataSource={data} loading={loading} />;
};

export default TableContainer;

【问题讨论】：

如果你需要通过data来决定，那你为什么要从props传递columns呢？再说一次，如果您试图通过数据来决定列，您如何决定相关列的 title？
不传列，antd表不显示数据，我要复用组件。
所以为了清楚起见，您不想再从props 传递columns，您需要完全从组件内的data 对象创建它？
顺便说一句，在您从 backed 获取数据或如果您有一个空的 data 对象之前，table 不会显示任何内容，因为它是它的实际行为。因此，如果您没有正确的数据，您需要停止显示您的表格吗？
是的。我该怎么做？

标签： reactjs antd

【解决方案1】：

您可以根据data.length 有条件地呈现您的表格，如下所示。如果你有一个空数组，那么它不会显示表格。

const TableContainer = (props) => {
  const { columns, data, loading } = props;

   return (
    <>{data?.length > 0 && <Table columns={columns} dataSource={data}  loading={loading} />}</>
  );
};

【讨论】：