在反应中使用 useState 更改 div 的背景

Question

我希望能够在 div 处于活动状态时更改包含姓名和年龄数组的背景。我正在使用样式组件。我只想为此使用 useState 挂钩，而无需任何路由器或任何东西。

我怎样才能做到这一点？我尝试在样式 css 中使用三元运算符，但在默认状态下使用 #000，即未激活。我可以做哪些代码更改来设置 div 活动？

styled.css

export const Style=styled.div<{active:boolean}> ((({active})=>({
   background-color: active? #0000 : transparent;
}));

Person.tsx

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

interface IdentifierProps{
  citizen: Array <Person>
}

export default function Person (props: IdentifierProps): ReactElement{
   const [ active, setActive]= useState(0);
   return(
     <div class="app">
     {props.citizen.map((all: person)=>(
      <Style key={all.name} href={} onClick={()=>setActive(all.name)} activeItem>
      </Style>
     </div>
)

Answer 1

看起来您只需要将其中的 HEX 更改为您希望它在活动时更改的内容：

background-color: active? #bada55 : transparent;

但是，这会将其更改为所有这些，而不仅仅是您单击的那个。为此，您需要跟踪每个元素的活动状态。您可以通过将 useState 分解为不止一个来做到这一点，但是

const [active, setActive]= useState({
person1Active: false,
person2Active: false,
person3Active: false,
});

然后你需要在onClick中设置这些。虽然我确信那里有更优雅的解决方案。

在反应中使用 useState 更改 div 的背景

Changing background of div using useState in react

reactjs

styled-components

react-hooks