React+Antd表格中如何实现超长字符串的点击展开与收起？

import React, { useState } from 'react';
import { Table } from 'antd';

const columns = [{
  title: '超长内容',
  dataIndex: 'content',
  render: (text) => (text.length > 20 ? `${text.substring(0, 20)}...` : text), // 省略号处理
}];

const data = [{
  key: '1',
  content: '这是一段非常非常长的内容，需要进行省略号展示和点击展开功能。'
}];

const MyTable = () => {
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);

  const onExpand = (expanded, record) => {
    const newExpandedRowKeys = expanded ? [...expandedRowKeys, record.key] : expandedRowKeys.filter(key => key !== record.key);
    setExpandedRowKeys(newExpandedRowKeys);
  };

  const expandedRowRender = (record) => (
    <div style={{ padding: '10px' }}>
      {record.content}
    </div>
  );

  return (
    <Table
      columns={columns}
      dataSource={data}
      expandable={{
        expandedRowRender,
        expandRowByClick: true,
        onExpand,
      }}
      expandedRowKeys={expandedRowKeys}
    />
  );
};

export default MyTable;