如何基于状态与索引动态切换Styled Components组件？

嘿，我来帮你搞定这个需求！下面是完整的可运行实现代码，之后我会拆解关键部分帮你理解：

import React, { useState } from 'react';
import styled from 'styled-components';

// 定义基础按钮样式
const Button = styled.button`
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #e0e0e0;
  cursor: pointer;
  margin: 0 4px;
`;

// 继承基础按钮，修改选中状态的样式
const Button_Selected = styled(Button)`
  background: #2196f3;
  color: white;
`;

const ButtonList = () => {
  // 从API获取的列表
  const list = [1, 2, 3, 4, 5, 6, 7];
  // 初始化选中状态数组，所有元素默认false
  const [list_check, setListCheck] = useState(Array(list.length).fill(false));

  // 处理按钮点击的自定义函数
  const customFunc = (index) => {
    // 复制原状态数组，避免直接修改state
    const updatedCheck = [...list_check];
    // 将对应位置设为true
    updatedCheck[index] = true;
    setListCheck(updatedCheck);
  };

  return (
    <div>
      {list.map((item, index) => {
        // 根据当前索引的选中状态，动态选择渲染的组件
        const ButtonComponent = list_check[index] ? Button_Selected : Button;
        return (
          <ButtonComponent
            key={index}
            onClick={() => customFunc(index)}
          >
            {item}
          </ButtonComponent>
        );
      })}
    </div>
  );
};

export default ButtonList;

关键细节解释： #

• 动态选择组件：通过const ButtonComponent = list_check[index] ? Button_Selected : Button这行代码，我们根据list_check中对应索引的布尔值，决定渲染哪个Styled Component。这样点击后状态变化，组件就会自动切换。
• 状态更新的正确姿势：在customFunc里，我们先复制原状态数组（用扩展运算符[...list_check]），再修改对应位置的值，最后调用setListCheck更新状态——这是React中更新数组/对象类型state的标准做法，避免直接修改原state导致的渲染异常。
• 传递索引给点击事件：用箭头函数() => customFunc(index)包裹点击事件，确保点击时能正确传递当前元素的索引。如果直接写onClick={customFunc(index)}，会导致组件挂载时就立即执行函数，这是新手常踩的坑哦！
• 初始化选中状态数组：用Array(list.length).fill(false)快速创建一个和原列表长度相同、所有元素都是false的数组，比手动写[false, false, ...]更灵活，尤其是当列表长度变化时。

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