如何渲染多个antd表？

Question

我需要渲染多个表而不是一个包含许多列的表。

目前这张桌子看起来像，

它将数据呈现到多个列中。 我需要将数据呈现到两个不同的表中，例如，

代码在尝试渲染两个表时由于某种原因崩溃。

代码：

function App() {
  const data = [
    {
      key: "1",
      rollNo: "16CS21",
      name: "Ronald",
      rank: 2
    },
    {
      key: "2",
      rollNo: "16CS72",
      name: "John",
      rank: 4
    }
  ];
  return (
    <div>
      {data.map((d) => (
        <DetailComponent data={d} />
      ))}
    </div>
  );
}

表格渲染组件：

function DetailComponent({ data }) {
      return (
        <div>
          <Table
            dataSource={data}
            pagination={false}
            bordered={false}
            style={{ height: "0px" }}
          >
            <Column title="Roll No" dataIndex="rollNo" key="rollNo" width="100px" />
            <Column title="Name" dataIndex="name" key="name" />
            <Column title="rank" key="rank" dataIndex="rank" />
            <Column
              title="Action"
              key="action"
              render={() => (
                <Space size="middle">
                  <EditTwoTone style={{ fontSize: "18px" }} />
                  <DeleteTwoTone style={{ fontSize: "18px" }} twoToneColor="red" />
                </Space>
              )}
            />
          </Table>
        </div>
      );
    }

CodeSanbox 链接： https ://codesandbox.io/s/tree-data-antd-4-21-0-forked-xxhks9?file=/demo.js

Answer 1

好的，我看到两个问题。

1. 唯一的关键道具问题
2. 在地图功能中删除圆括号

data.map((d)=>dataComponent)

** 编辑 **

在我看来，您的表格组件在您传递单个对象时将对象列表作为数据输入。 尝试将对象转换为对象数组，如下所示：

[].concat(d)

编辑

上面提到的解决方案似乎解决了如图所示的问题

现在两个表都相互重叠。 你可以修复它。

如果有帮助，请务必标记答案。