React中按钮样式添加及列表项点击单激活样式切换问题

一、列表项单选样式切换问题解决 #

你用单个布尔值isActive的核心问题是所有列表项共享同一个状态，导致无法单独控制选中状态。正确的做法是存储当前选中项的唯一标识（比如id、唯一key，优先用业务id），让每个列表项根据自身标识是否匹配选中状态来应用样式。

代码示例 #

import { useState } from 'react';
import './styles.css';

const ItemList = () => {
  // 存储选中项的id，初始为null表示无选中项
  const [selectedId, setSelectedId] = useState(null);
  
  // 示例列表数据，每个项需包含唯一id
  const items = [
    { id: 1, content: '列表项1' },
    { id: 2, content: '列表项2' },
    { id: 3, content: '列表项3' }
  ];

  const handleItemClick = (itemId) => {
    // 点击时更新选中项的id
    setSelectedId(itemId);
  };

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          <div 
            className={`list-item ${selectedId === item.id ? 'active' : ''}`}
            onClick={() => handleItemClick(item.id)}
          >
            {item.content}
          </div>
        </li>
      ))}
    </ul>
  );
};

export default ItemList;

对应的CSS（styles.css）：

.list-item {
  padding: 8px 12px;
  cursor: pointer;
  border: 1px solid #eee;
  margin-bottom: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.list-item.active {
  background-color: #165DFF;
  color: white;
  border-color: #165DFF;
}

二、React中为按钮添加样式的几种方式 #

1. 行内样式 #

适合简单的临时样式，直接通过style属性传入对象：

const MyButton = () => {
  return (
    <button 
      style={{ 
        padding: '8px 16px', 
        backgroundColor: '#165DFF', 
        color: 'white', 
        border: 'none', 
        borderRadius: '4px',
        cursor: 'pointer'
      }}
    >
      点击我
    </button>
  );
};

2. 普通CSS类名 #

和传统HTML用法一致，定义全局CSS类后通过className应用：

/* styles.css */
.custom-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.custom-btn:hover {
  background-color: #f5f5f5;
}

.custom-btn.primary {
  background-color: #165DFF;
  color: white;
  border-color: #165DFF;
}

const MyButton = () => {
  return (
    <>
      <button className="custom-btn">普通按钮</button>
      <button className="custom-btn primary">主按钮</button>
    </>
  );
};

3. CSS Modules（避免样式冲突） #

Create React App默认支持，样式文件命名为[name].module.css，导入后作为对象使用：

/* Button.module.css */
.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.primary {
  background-color: #165DFF;
  color: white;
}

import styles from './Button.module.css';

const MyButton = () => {
  return (
    <button className={`${styles.btn} ${styles.primary}`}>
      模块样式按钮
    </button>
  );
};

4. CSS-in-JS（如styled-components） #

先安装依赖：npm install styled-components，然后创建样式化组件：

import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  &.primary {
    background-color: #165DFF;
    color: white;
  }

  &:hover {
    opacity: 0.9;
  }
`;

const MyButton = () => {
  return (
    <StyledButton className="primary">Styled按钮</StyledButton>
  );
};

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