在react ant design表格中优雅处理超长文本：展开与换行
Ant Design表格组件功能强大，但处理超长文本时需要额外技巧。本文介绍如何通过点击展开超长字符串，并使其自动换行，且仅展开被点击的行。
实现步骤：
- 行状态管理: 为表格每一行添加一个状态变量，追踪该行是否展开：
state = {
expandedRows: {} // 使用对象存储，key为行key，value为布尔值
};
- 点击事件: 在表格单元格中添加点击事件，调用展开/收起函数：
this.toggleExpand(record.key)}> {/* 渲染单元格内容 */}
-
展开/收起函数: 定义
toggleExpand函数，更新行展开状态：
toggleExpand = (key) => {
this.setState((prevState) => ({
expandedRows: {
...prevState.expandedRows,
[key]: !prevState.expandedRows[key],
},
}));
};
-
条件渲染: 根据
expandedRows状态渲染单元格内容：
this.toggleExpand(record.key)}> {this.state.expandedRows[record.key] ? ( {record.name}) : ({record.name})}
通过以上步骤，点击单元格即可展开超长文本并自动换行，同时其他行保持原样。 whiteSpace: 'pre-wrap' 允许文本自动换行，而 textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' 则实现省略号效果。
