react+antd table：巧妙处理超长字符串的动态展开
在使用React和AntD Table组件时，经常会遇到超长字符串显示的问题。简单的省略号处理虽然节省空间，但用户难以查看完整信息。本文介绍一种更友好的方法：单击行即可展开超长字符串，且仅展开被点击的行。
问题： 如何实现点击事件，只展开当前点击行的超长字符串，而不是所有行？
解决方案：
一个可参考的在线示例：在线Demo
核心在于利用AntD Table的rowKey属性唯一标识每一行，并通过点击事件的e.target获取目标行。然后，通过改变行数据的展开状态来控制超长字符串的显示与隐藏。
步骤：
-
为Table行添加唯一
key: 确保每一行都有唯一的key值，AntD Table会自动使用它。 如果你的数据没有key，需要添加一个。 -
获取点击行的
key: 在点击事件处理函数中，使用e.target找到点击的行，并提取其key值。const handleRowClick = (e) => { const key = e.target.closest('tr').dataset.rowKey; // 获取当前点击行的key }; -
管理展开状态: 使用状态变量(
expandedRows)跟踪每一行的展开状态。const [expandedRows, setExpandedRows] = useState({}); const getExpandedRow = (key) => expandedRows[key] || false; // 获取行的展开状态 const handleExpand = (row, expand) => { setExpandedRows({ ...expandedRows, [row.key]: expand }); // 更新展开状态 }; -
根据状态控制超长字符串显示: 在渲染单元格时，根据
getExpandedRow(row.key)的结果来决定是否显示完整字符串。
通过以上步骤，即可实现点击行展开超长字符串，且仅展开被点击行的功能。 记住，清晰的key管理是实现此功能的关键。
