Javascript 如何在多个文件中有效地切换具有多个HTML元素的类

每当单击我的

div

时，我都会切换箭头图像。我用鼠标控制点击的状态

const [toggleArrow, setToggleArrow] = useState(false)

My div有一个

onClick

函数，用于控制状态并切换添加图像的

faq主题切换箭头

类

<div className={`faq-subject ${toggleArrow ? 'faq-subject-toggle-arrow' : ''}`} onClick={() => {
  setToggleArrow(!toggleArrow)
}>

{
setTogleArrow（！TogleArrow）
}>

我的问题是，我在多个样式中有50个

div

s，不想让50个状态切换一个图像

---

有没有一个更有效的解决方案，代码更少？

我创建了一些做同样事情的东西。我提取了你的代码并制作了一个组件。现在，状态位于组件内部，不会影响其他组件

组成部分

import { useState } from "react";

export const Button = () => {
  const [toggleArrow, setToggleArrow] = useState(false);
  return (
    <div
      style={{ width: "50px", height: "50px", margin: "10px" }}
      className={`faq-subject ${toggleArrow ? "faq-subject-toggle-arrow" : ""}`}
      onClick={() => {
        setToggleArrow(!toggleArrow);
      }}
    ></div>
  );
};

现在，您可以在任何地方多次使用它

import { Button } from "./button";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Button />
      <Button />
      <Button />
      <Button />
      <Button />
    </div>
  );
}

从“/Button”导入{Button}；
导入“/styles.css”；
导出默认函数App（）{
返回(
);
}

将此代码转换为一个组件并多次使用。因此，状态可以存在于每个组件中，并且不会相互影响。您可以实现这一点，但可以将此div放在单独的组件中，并在该组件中管理该状态。

import { Button } from "./button";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Button />
      <Button />
      <Button />
      <Button />
      <Button />
    </div>
  );
}