如何通过useState实现AntD表格单行列高亮？

你当前的问题是用布尔值active控制所有行的类名，导致点击任意一行后所有行都会应用green样式。要实现仅点击行高亮，需调整状态存储和类名判断逻辑：

修改步骤： #

• 将状态active从布尔值改为存储选中行的唯一标识（优先用数据自带的id字段，比rowIndex更可靠，避免数据排序后索引变化的问题）
• 在rowClassName中判断当前行的标识是否与选中标识一致，一致则添加高亮类
• 点击行时，将当前行的标识存入状态

修改后的完整代码： #

const TableComponent = () => {
  // 存储选中行的id，初始为null表示无选中行
  const [activeRowId, setActiveRowId] = useState(null);

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      // 每行判断是否为选中行，是则添加green类
      rowClassName={(record) => record.id === activeRowId ? "green" : ""}
      onRow={(record) => {
        return {
          onClick: () => {
            // 点击时切换选中状态：当前行已选中则取消，否则选中
            setActiveRowId(activeRowId === record.id ? null : record.id);
          },
        };
      }}
    />
  );
};

export default TableComponent;

补充高亮样式： #

需要在全局样式或组件样式中添加高亮样式：

.green {
  background-color: #e6ffed; /* 可根据需求自定义颜色 */
}

如果你的数据里没有id字段，也可以用rowIndex替代，但注意当数据排序、分页时，rowIndex会变化，用唯一标识更稳定。

内容的提问来源于stack exchange，提问作者Carl