帮我用React和antd实现表格嵌套一层表格之后再嵌套第二层表格

好的，我会帮你解答这个问题。

首先，我们需要安装React和antd。在命令行中输入以下命令：

npm install react antd --save

安装完成后，我们可以开始编写代码了。

首先，在你的React组件中引入antd：

import { Table } from 'antd';

然后定义你的表格数据。为了演示，我们可以使用以下示例数据：

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: '1-1',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: '1-1-1',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
          },
        ],
      },
      {
        key: '1-2',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
    ],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

接下来，定义你的表格列：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

现在，我们可以开始编写我们的表格了。我们将使用antd的`Table`组件。

const App = () => {
  return (
    <Table
      dataSource={data}
      columns={columns}
      expandable={{
        expandedRowRender: (record) => {
          const columns2 = [
            {
              title: 'Name',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: 'Age',
              dataIndex: 'age',
              key: 'age',
            },
            {
              title: 'Address',
              dataIndex: 'address',
              key: 'address',
            },
          ];

          return (
            <Table
              columns={columns2}
              dataSource={record.children}
              pagination={false}
              expandable={{
                expandedRowRender: (record) => {
                  const columns3 = [
                    {
                      title: 'Name',
                      dataIndex: 'name',
                      key: 'name',
                    },
                    {
                      title: 'Age',
                      dataIndex: 'age',
                      key: 'age',
                    },
                    {
                      title: 'Address',
                      dataIndex: 'address',
                      key: 'address',
                    },
                  ];

                  return (
                    <Table
                      columns={columns3}
                      dataSource={record.children}
                      pagination={false}
                    />
                  );
                },
                rowExpandable: (record) => record.children.length > 0,
              }}
            />
          );
        },
        rowExpandable: (record) => record.children.length > 0,
      }}
    />
  );
};

以上代码实现了一个表格嵌套一层表格之后再嵌套第二层表格的效果。

当你点击第一层表格的展开按钮时，会显示第二层表格。当你点击第二层表格的展开按钮时，会显示第三层表格。

希望这个例子对你有所帮助！