帮我用antdesign+react实现三层表格从属嵌套效果

好的，这里是一个三层表格从属嵌套的示例代码：

import React from "react";
import { Table } from "antd";

const columns1 = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address"
  }
];

const columns2 = [
  {
    title: "学科",
    dataIndex: "subject",
    key: "subject"
  },
  {
    title: "分数",
    dataIndex: "score",
    key: "score"
  }
];

const columns3 = [
  {
    title: "项目",
    dataIndex: "project",
    key: "project"
  },
  {
    title: "进度",
    dataIndex: "progress",
    key: "progress"
  }
];

const data1 = [
  {
    key: "1",
    name: "张三",
    age: 18,
    address: "北京市朝阳区"
  },
  {
    key: "2",
    name: "李四",
    age: 20,
    address: "上海市浦东新区"
  }
];

const data2 = {
  "1": [
    {
      key: "1",
      subject: "数学",
      score: 90
    },
    {
      key: "2",
      subject: "语文",
      score: 95
    }
  ],
  "2": [
    {
      key: "1",
      subject: "英语",
      score: 88
    },
    {
      key: "2",
      subject: "物理",
      score: 92
    }
  ]
};

const data3 = {
  "1.1": [
    {
      key: "1",
      project: "设计",
      progress: "80%"
    },
    {
      key: "2",
      project: "开发",
      progress: "60%"
    }
  ],
  "1.2": [
    {
      key: "1",
      project: "文档",
      progress: "90%"
    },
    {
      key: "2",
      project: "测试",
      progress: "70%"
    }
  ],
  "2.1": [
    {
      key: "1",
      project: "UI设计",
      progress: "85%"
    },
    {
      key: "2",
      project: "编码",
      progress: "75%"
    }
  ],
  "2.2": [
    {
      key: "1",
      project: "需求分析",
      progress: "95%"
    },
    {
      key: "2",
      project: "测试",
      progress: "80%"
    }
  ]
};

class NestedTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      expandedRowKeys1: [],
      expandedRowKeys2: []
    };
  }

  onExpand1 = (expanded, record) => {
    const { expandedRowKeys1 } = this.state;

    if (expanded) {
      this.setState({
        expandedRowKeys1: [...expandedRowKeys1, record.key]
      });
    } else {
      this.setState({
        expandedRowKeys1: expandedRowKeys1.filter(key => key !== record.key)
      });
    }
  };

  onExpand2 = (expanded, record) => {
    const { expandedRowKeys2 } = this.state;

    if (expanded) {
      this.setState({
        expandedRowKeys2: [...expandedRowKeys2, record.key]
      });
    } else {
      this.setState({
        expandedRowKeys2: expandedRowKeys2.filter(key => key !== record.key)
      });
    }
  };

  getExpandedRowRender2 = record => {
    const subjectData = data2[record.key];
    const expandedRowRender2 = row => {
      const projectData = data3[`${record.key}.${row.key}`];
      return (
        <Table
          columns={columns3}
          dataSource={projectData}
          pagination={false}
          size="small"
          showHeader={false}
        />
      );
    };

    return (
      <Table
        columns={columns2}
        dataSource={subjectData}
        pagination={false}
        size="small"
        showHeader={false}
        expandedRowRender={expandedRowRender2}
        rowKey="key"
        onExpand={this.onExpand2}
        expandedRowKeys={this.state.expandedRowKeys2}
      />
    );
  };

  render() {
    const expandedRowRender1 = record => {
      const subjectData = data2[record.key];
      const expandedRowRender1 = row => {
        const projectData = data3[`${record.key}.${row.key}`];
        return this.getExpandedRowRender2(row);
      };

      return (
        <Table
          columns={columns2}
          dataSource={subjectData}
          pagination={false}
          size="small"
          showHeader={false}
          expandedRowRender={expandedRowRender1}
          rowKey="key"
          onExpand={this.onExpand1}
          expandedRowKeys={this.state.expandedRowKeys1}
        />
      );
    };

    return (
      <Table
        columns={columns1}
        dataSource={data1}
        pagination={false}
        size="small"
        expandedRowRender={expandedRowRender1}
        rowKey="key"
      />
    );
  }
}

export default NestedTable;

这个示例中，我们使用了三个表格分别表示三个不同的数据源，然后将它们嵌套在了一个表格中。我们通过 `expandedRowRender` 属性指定了第一个表格展开时应该渲染的内容，其中又嵌套了另外一个表格。我们将第二个表格的展开和收起的状态存储在 `state` 中，并且通过 `getExpandedRowRender2` 方法生成第二个表格的展开行渲染函数，以便在第一个表格的展开行中使用。同样，我们也将第三个表格的展开和收起的状态存储在 `state` 中，并且将第三个表格作为第二个表格的展开行。最后，我们将整个组件作为一个表格呈现。