react-antd实现嵌套表格，自定义嵌套图标

这是你提供的原始代码，已经按照你的要求输出：

import React, { Component } from "react";
import { Table, Button, Modal, Image, message } from "antd";
import { DownOutlined, RightOutlined } from "@ant-design/icons";
import "./index.css"; // 引入外部 CSS 文件

class NestedTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false, // 用于控制模态框显示或关闭
      imagePreviewUrl: "", // 用于存储点击图片的 URL
      modalContent: "", // 用于存储点击行的内容
      expressModalVisible: false, // 控制快递信息模态框的显示与隐藏
      expressInfo: {}, // 存储选中行的快递信息
      data: [
        {
          key: "1",
          name: "张三",
          age: 32,
          address: "北京市",
          status: "待归还",
          image:
            "https://q8.itc.cn/q_70/images01/20240304/b4569b4c56cf40bc851003d157418efb.jpeg",

          nestedData: [
            {
              key: "1-1",
              product: "手机",
              quantity: 1,
              price: "3000",
              expressInfo: {
                company: "顺丰快递",
                trackingNumber: "SF123456789",
                recipient: "张三",
                deliveryDate: "2024-11-10 14:30",
                status: "运输中",
                address: "北京市朝阳区某某街道1号",
              },
              image:
                "https://q8.itc.cn/q_70/images01/20240304/b4569b4c56cf40bc851003d157418efb.jpeg",
            },
            {
              key: "1-2",
              product: "笔记本",
              quantity: 2,
              price: "5000",
              expressInfo: {
                company: "京东物流",
                trackingNumber: "JD987654321",
                recipient: "李四",
                deliveryDate: "2024-11-12 16:00",
                status: "已签收",
                address: "上海市浦东新区某某路10号",
              },
              image:
                "https://q8.itc.cn/q_70/images01/20240304/b4569b4c56cf40bc851003d157418efb.jpeg",
            },
          ],
        },
        {
          key: "2",
          name: "李四",
          age: 28,
          address: "上海市",
          status: "待申请",
          image:
            "https://q8.itc.cn/q_70/images01/20240304/b4569b4c56cf40bc851003d157418efb.jpeg",
          nestedData: [
            {
              key: "2-1",
              product: "电视",
              quantity: 1,
              price: "4000",
              express: "444444333",
              expressInfo: {
                company: "京东物流",
                trackingNumber: "JD987654321",
                recipient: "李四",
                deliveryDate: "2024-11-12 16:00",
                status: "已签收",
                address: "上海市浦东新区某某路10号",
              },
              image:
                "https://q8.itc.cn/q_70/images01/20240304/b4569b4c56cf40bc851003d157418efb.jpeg",
            },
            {
              key: "2-2",
              product: "耳机",
              quantity: 2,
              price: "500",
              express: "35345236",
              expressInfo: {
                company: "京东物流",
                trackingNumber: "JD987654321",
                recipient: "李四",
                deliveryDate: "2024-11-12 16:00",
                status: "已签收",
                address: "上海市浦东新区某某路10号",
              },
              image:
                "https://q8.itc.cn/q_70/images01/20240304/b4569b4c56cf40bc851003d157418efb.jpeg",
            },
          ],
        },
      ],
      // 外层表格的列定义
      outerColumns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "地址",
          dataIndex: "address",
          key: "address",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
        },
        {
          title: "操作",
          key: "action",
          render: (_, record) => {
            if (record.status === "待归还") {
              return (
                <Button onClick={() => this.handleReturn(record.key)}>
                  归还
                </Button>
              );
            }
            if (record.status === "待申请") {
              return (
                <Button onClick={() => this.handleApply(record.key)}>
                  申请
                </Button>
              );
            }
            return (
              <Button onClick={() => this.handleDelete(record.key)}>
                删除
              </Button>
            );
          },
        },
      ],
      // 内嵌表格的列定义
      nestedColumns: [
        {
          title: "产品",
          dataIndex: "product",
          key: "product",
        },
        {
          title: "数量",
          dataIndex: "quantity",
          key: "quantity",
        },
        {
          title: "价格",
          dataIndex: "price",
          key: "price",
          onCell: (record) => ({
            onClick: () => {
              // 点击“价格”列时，显示详情模态框
              this.showModal(record);
            },
          }),
        },
        {
          title: "快递单号",
          key: "express",
          dataIndex: "express",
          render: (text, record) => (
            <span onClick={() => this.showExpressInfoModal(record)}>
              查看快递
            </span>
          ),
        },
        {
          title: "图片",
          key: "image",
          dataIndex: "image",
          render: (text, record) => <Image width={50} src={record.image} />,
        },
      ],
    };
  }

  // 处理归还操作
  handleReturn = (key) => {
    message.success(`归还操作: ${key}`);
  };

  // 处理申请操作
  handleApply = (key) => {
    message.success(`申请操作: ${key}`);
  };

  // 处理删除操作
  handleDelete = (key) => {
    message.success(`删除操作: ${key}`);
  };

  // 关闭快递信息模态框
  handleExpressModalClose = () => {
    this.setState({ expressModalVisible: false });
  };

  // 显示快递信息模态框
  showExpressInfoModal = (record) => {
    console.log("555555", record);
    this.setState({
      expressModalVisible: true,
      expressInfo: record.expressInfo,
    });
  };

  // 显示产品详情模态框并设置内容
  showModal = (record) => {
    this.setState({
      isModalVisible: true,
      selectedRecord: record, // 保存当前选中的记录
      modalContent: `产品: ${record.product}\n数量: ${record.quantity}\n价格: ${record.price}`,
    });
  };

  // 关闭产品详情模态框
  handleCancel = () => {
    this.setState({ isModalVisible: false });
  };

  // 展开行渲染
  expandedRowRender = (record) => {
    return (
      <div style={{ margin: "3px" }}>
        <Table
          columns={this.state.nestedColumns}
          dataSource={record.nestedData}
          pagination={false}
          bordered
          rowKey="key"
          scroll={{ x: 1000 }} // 内嵌表格水平滚动
          className="nested-table" // 为内嵌表格添加类
          style={{ margin: "3px", border: "1px solid #f0f0f0" }} // 设置内嵌表格的间距
        />
      </div>
    );
  };

  // 渲染展开/收起图标
  renderExpandIcon = ({ expanded, onExpand, record }) => (
    <span style={{ display: "flex", alignItems: "center" }}>
      {expanded ? (
        <DownOutlined onClick={(e) => onExpand(record, e)} />
      ) : (
        <RightOutlined onClick={(e) => onExpand(record, e)} />
      )}
      <span style={{ marginLeft: "4px" }}>{record.key}</span>
    </span>
  );

  render() {
    return (
      <div style={{ padding: "20px" }}>
        <Table
          columns={this.state.outerColumns}
          dataSource={this.state.data}
          bordered
          scroll={{ x: 1000 }}
          expandable={{
            expandedRowRender: this.expandedRowRender,
            expandIcon: this.renderExpandIcon,
          }}
          rowKey="key"
        />

        <Modal
          title="快递信息"
          visible={this.state.expressModalVisible}
          onCancel={this.handleExpressModalClose}
          footer={null}
        >
          <p>公司: {this.state.expressInfo.company}</p>
          <p>单号: {this.state.expressInfo.trackingNumber}</p>
          <p>收件人: {this.state.expressInfo.recipient}</p>
          <p>寄送时间: {this.state.expressInfo.deliveryDate}</p>
          <p>状态: {this.state.expressInfo.status}</p>
          <p>地址: {this.state.expressInfo.address}</p>
        </Modal>

        <Modal
          title="产品详情"
          visible={this.state.isModalVisible}
          onCancel={this.handleCancel}
          footer={null}
        >
          <p>{this.state.modalContent}</p>
        </Modal>
      </div>
    );
  }
}

export default NestedTable;