React新手求AntDesign可悬停选中的基础列表组件

• 直接用AntDesign的List组件就能满足需求，它是轻量化的基础列表组件，没有多余表头，配合自定义样式和状态管理即可实现悬停高亮+选中效果：
  示例代码如下：

  import { List } from 'antd';
  import { useState } from 'react';
  import './CustomList.css'; // 引入自定义样式文件
  
  const SelectableHoverList = () => {
    const [selectedId, setSelectedId] = useState('1');
  
    // 模拟笔记数据
    const noteData = [
      { id: '1', title: '日常购物清单' },
      { id: '2', title: 'React学习笔记' },
      { id: '3', title: 'Joplin复刻进度' },
    ];
  
    return (
      <List
        dataSource={noteData}
        renderItem={(item) => (
          <List.Item
            key={item.id}
            className={`custom-list-item ${selectedId === item.id ? 'selected' : ''}`}
            onClick={() => setSelectedId(item.id)}
          >
            {item.title}
          </List.Item>
        )}
      />
    );
  };
  
  export default SelectableHoverList;
  

  对应的CustomList.css样式：

  .custom-list-item {
    cursor: pointer;
    padding: 8px 16px;
    transition: background-color 0.2s ease;
  }
  .custom-list-item:hover {
    background-color: #f0f2f5;
  }
  .custom-list-item.selected {
    background-color: #e6f7ff;
    border-left: 3px solid #1890ff;
  }
  

• 你提到的Database组件应该是指Table组件，它默认带表头，适合结构化数据展示，确实不适合你的基础列表场景，用List更适配。

• 如果需要多选功能，可以在List.Item里嵌套Checkbox组件，配合状态管理实现批量选中；要是想更贴合Joplin侧边栏的视觉效果，还可以给选中项调整边框、背景色等样式，自定义空间完全充足。

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