如何动态修改styled-components样式？React单选按钮样式实现求助

别担心用state会影响所有按钮——其实这正是state的合适场景！我们只需要用state记录当前选中的按钮标识，然后给每个按钮单独判断是否匹配这个标识，就能实现只有点击的按钮变红的效果。

首先先纠正一个小细节：你导入styled-components的方式错了，应该是import styled from 'styled-components'而不是import styles from 'styled-components'，这个得先改过来。

接下来看完整的修改方案：

import React from 'react';
import styled from 'styled-components'; // 修正导入

const ButtonsRow = styled.div`
  display: flex;
  justify-content: space-evenly;
`;
const Button = styled.div`
  cursor: pointer;
  padding: 8px 16px; // 加个内边距，按钮看起来更舒服
  border-radius: 4px; // 可选，圆角更美观
  :hover {
    background-color: gray;
  }
  background-color: ${props => props.selected ? 'red' : 'transparent'}; // 用transparent代替none，更符合CSS规范
  transition: background-color 0.2s; // 可选，加个过渡动画
`;

class ButtonsContainer extends React.Component {
  // 初始化state，记录当前选中的按钮标识（比如按钮文本）
  state = {
    selectedButton: null
  };

  handleClick = (e) => {
    // 获取点击按钮的文本内容作为标识
    const buttonText = e.target.textContent;
    // 更新state，把选中的按钮文本存进去
    this.setState({
      selectedButton: buttonText
    });
  }

  render() {
    const { selectedButton } = this.state;
    return(
      <ButtonsRow>
        {/* 每个Button的selected prop判断：当前按钮文本是否和state中的选中标识一致 */}
        <Button 
          onClick={this.handleClick} 
          selected={selectedButton === 'People'}
        >
          People
        </Button>
        <Button 
          onClick={this.handleClick} 
          selected={selectedButton === 'Members'}
        >
          Members
        </Button>
        <Button 
          onClick={this.handleClick} 
          selected={selectedButton === 'Games'}
        >
          Games
        </Button>
      </ButtonsRow>
    );
  }
}

export default ButtonsContainer;

关键逻辑说明： #

• 我们用state.selectedButton存储当前选中的按钮文本（你也可以用自定义的data-key属性，比如给每个Button加data-key="people"，然后在handleClick里取e.target.dataset.key，这样按钮文本变化也不影响逻辑）
• 渲染每个Button时，单独判断selectedButton是否等于当前按钮的标识，只有匹配的那个Button会拿到selected={true}，从而应用红色背景
• 这样state只会控制每个按钮的独立判断，完全不会“作用于所有按钮”，只会让选中的那个触发样式变化

如果你的按钮数量比较多，也可以把按钮数据放到一个数组里循环渲染，这样更简洁：

// 定义按钮数据数组
const buttonItems = ['People', 'Members', 'Games'];

// render里改成循环渲染
render() {
  const { selectedButton } = this.state;
  return(
    <ButtonsRow>
      {buttonItems.map(item => (
        <Button 
          key={item}
          onClick={this.handleClick} 
          selected={selectedButton === item}
        >
          {item}
        </Button>
      ))}
    </ButtonsRow>
  );
}

这样后期加按钮只需要修改数组就行，不用重复写Button组件~

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