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

Posted 2023-03-15

【中文标题】在反应中使用 useState 更改 div 的背景

【英文标题】：Changing background of div using useState in react

【发布时间】：2022-01-09 08:39:28

【问题描述】：

我希望能够在它处于活动状态时更改包含一组名称和年龄的 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>
)

【参考方案1】：

看起来您只需将其中的十六进制更改为您希望它在活动时更改的内容：

background-color: active? #bada55 : transparent;

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

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

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

【讨论】：

这没有帮助。 div 的默认颜色变为 #bada55 就像以前一样。我希望颜色在它处于活动状态时更改为#bada55。我不确定我的状态是否正确，我需要帮助

这个想法是不要将数组中单个项目的值硬编码为 false。我知道一种更好的方法是拥有一个唯一的密钥并在活动时解析每个 id 但我不确定如何为我的代码做到这一点

尝试将useState中active的初始值设置为false，而不是0。然后在setActive中设置为true/false。或者，如果您需要一个整数，请检查 active !== 0 吗？ #0000 : 透明;在三元中。

当我输入 false 时，我在 onClick=()=>setActive(all.name) 上收到错误“字符串的参数不能分配给“setStateAction”类型的参数为布尔值跨度>

是的，它会的，all.name 不是布尔值。这就是为什么我写了将其设置为真/假而不是名称的原因。然后，您可以通过拥有 id 并稍后检查这些来重构您提到的方式。