React中使用useState配合styled-components修改激活div背景色问题

问题定位 #

• styled组件接收的判断属性是active，但你调用时传的是无值的activeItem，没有正确传递布尔判断值
• 颜色配置错误：#0000是四位数十六进制的完全透明黑色，同时你把激活态的颜色写在了三元表达式的真值位置，和未激活的transparent无差异，导致样式不生效；CSS属性用对象写法时需改为驼峰backgroundColor或者加引号
• useState类型不匹配：初始值为数字0，后续点击赋值为字符串类型的姓名，默认判断逻辑失效
• 遍历子项时没有做单独的激活态判断，所有子项共用同一个状态标记导致样式异常
• 基础语法错误：React中类名需用className、无用的href属性未删除、标签未闭合、类型命名大小写不统一

代码修改 #

1. 修复styled组件代码 #

import styled from 'styled-components';

export const Style = styled.div<{active: boolean}>(({active}) => ({
  // 激活态显示黑色，未激活显示透明，可按需调整颜色
  backgroundColor: active ? '#000' : 'transparent',
  // 可按需补充其他基础样式
  padding: '10px 16px',
  marginBottom: '8px',
  cursor: 'pointer',
  color: active ? '#fff' : 'inherit' // 激活态自动切换文字为白色，可删除
}))

2. 修复Person.tsx逻辑 #

import React, { useState, ReactElement } from 'react';
import { Style } from './styled'; // 按你的实际路径引入Style组件

type Person = {
  name: string;
  age: number;
}

interface IdentifierProps {
  citizen: Array<Person>
}

export default function Person (props: IdentifierProps): ReactElement {
  // 初始值设为null代表默认无激活项，类型和后续赋值的姓名统一为string
  const [active, setActive] = useState<string | null>(null);
  return(
    <div className="app">
      {props.citizen.map((item: Person) => (
        <Style 
          key={item.name} 
          // 支持点击当前激活项取消激活，不需要可去掉三元，直接setActive(item.name)
          onClick={() => setActive(active === item.name ? null : item.name)}
          // 核心逻辑：判断当前项是否为激活项，传递布尔值给styled组件的active属性
          active={active === item.name}
        >
          {/* 展示姓名年龄，按你的需求调整结构 */}
          <div>姓名：{item.name}</div>
          <div>年龄：{item.age}</div>
        </Style>
      ))}
    </div>
  )
}

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