React antd 表格嵌套表格（可展开）

注意： 采用的是React antDsign 4.x版本 

实现效果

代码实现

import { Space, Table } from 'antd';
import React, { useRef } from 'react';const CheckList = () => {const data = [{id: 1,name: '张三',age: 18,content: [{id: '1-1',text: '我叫张三',},],},{id: 2,name: '李四',age: 20,content: [{id: '2-1',text: '我叫李四',},],},];const expandedRowRender = (record) => {const columns = [{ title: '自我介绍', dataIndex: 'text', key: 'text' }];return <Table columns={columns} dataSource={record.content} pagination={false} bordered />;};const handle = (type, row) => {if (type === '编辑') {console.log(row);} else {console.log(row);}};return (<><TabledataSource={data}rowKey={(record) => record.id}expandedRowRender={(record) => expandedRowRender(record)}columns={[{ dataIndex: 'name', title: '名称', width: 200, key: 'name' },{ dataIndex: 'age', title: '年龄', width: 200, key: 'age' },{title: '操作',key: 'operation',align: 'center',render: (text, row) => (<Space size="middle"><aonClick={() => {handle('编辑', row);}}>编辑</a><aonClick={() => {handle('删除', row);}}>删除</a></Space>),},]}size="small"style={{ width: '600px' }}/></>);
};export default CheckList;

注：本人前端小白 ，如有不对的地方还请多多指教