ReactJS中如何修改列表单个选中项的样式

你当前的问题出在用单个布尔值isSelected作为所有列表项的选中状态，导致点击时所有项都会同步切换样式。要实现只高亮选中项的需求，只需要调整状态的存储方式，精准追踪选中的具体项即可，完全基于现有代码结构修改就能实现。

单选场景解决方案（一次选一个） #

把状态从布尔值改成存储选中项的id（或其他唯一标识），这样就能精准控制单个项的样式：

function SelectableList({ items, onItemSelected }: Props) {
    // 用选中项的id替代全局布尔值，初始值设为null表示无选中项
    const [selectedItemId, setSelectedItemId] = useState<string | null>(null);

    return (
        <div>
            <ul className={styles.ul}>
                {items.map((item) => (
                    <li
                        // 判断当前项id是否等于选中的id，来应用对应样式
                        className={selectedItemId === item.id ? styles.selected : styles.li}
                        key={item.id}
                        onClick={() => {
                            onItemSelected(item);
                            // 点击时更新选中项的id
                            setSelectedItemId(item.id);
                        }}
                    >
                        <SelectableItem item={item} />
                    </li>
                ))}
            </ul>
        </div>
    );
}

多选场景扩展（可选） #

如果需要支持同时选中多个项，可以用Set来存储所有选中项的id：

function SelectableList({ items, onItemSelected }: Props) {
    // 用Set存储多个选中项的id
    const [selectedItemIds, setSelectedItemIds] = useState<Set<string>>(new Set());

    const toggleItem = (itemId: string) => {
        setSelectedItemIds(prev => {
            const newSet = new Set(prev);
            // 切换选中状态：存在则删除，不存在则添加
            newSet.has(itemId) ? newSet.delete(itemId) : newSet.add(itemId);
            return newSet;
        });
    };

    return (
        <div>
            <ul className={styles.ul}>
                {items.map((item) => (
                    <li
                        className={selectedItemIds.has(item.id) ? styles.selected : styles.li}
                        key={item.id}
                        onClick={() => {
                            onItemSelected(item);
                            toggleItem(item.id);
                        }}
                    >
                        <SelectableItem item={item} />
                    </li>
                ))}
            </ul>
        </div>
    );
}

核心修改点 #

1. 状态存储逻辑：从全局布尔值改为存储具体选中项的标识（id），避免所有项共用同一个状态
2. 样式判断逻辑：渲染每个列表项时，对比自身id和选中状态里的标识，决定是否应用选中样式
3. 点击事件处理：点击时更新对应项的选中状态，而非全局切换

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