react+ant design表格：巧妙处理超长文本的展开与收起
在使用React和Ant Design构建表格时，常常会遇到超长文本需要处理的情况。简单的省略号处理固然方便，但如果需要点击展开查看完整文本，并只展开当前行，则需要更精细的控制。
本文将介绍如何通过Ant Design Table组件的expandRowByClick和expandedRowRender属性实现这一功能。
关键在于灵活运用expandedRowKeys状态来管理展开的行，以及自定义expandedRowRender函数来渲染展开后的内容。
代码示例：
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) => (
{record.content}
);
return (
通过以上代码，点击表格行时，只有该行会展开显示完整内容，实现展开和收起的切换效果。 省略号处理在render函数中实现，保证了简洁性。 此方法有效地解决了超长文本在表格中的展示问题，提升了用户体验。
