如何渲染多個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)

編輯

上面提到的解決方案似乎解決了如圖所示的問題

現在兩個表都相互重疊。 你可以修復它。

如果有幫助，請務必標記答案。