Блог

Главная - Вопросы по программированию - Как эффективно переключать классы с несколькими элементами HTML в нескольких файлах

Как эффективно переключать классы с несколькими элементами HTML в нескольких файлах

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я переключаю изображение со стрелкой всякий раз, когда мой div щелкает. Я контролирую состояние щелчка с помощью

 const [toggleArrow, setToggleArrow] = useState(false)

В моем div есть onClick функция, которая управляет состоянием и переключает faq-subject-toggle-arrow класс, который добавляет изображение

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

Моя проблема в том, что у меня есть 50 div секунд для нескольких стилей, и я не хочу создавать 50 состояний для переключения одного изображения.

Есть ли более эффективное решение для этого с меньшим количеством кода?

Комментарии:

1. превратите этот код в один компонент и используйте его несколько раз. таким образом, состояние может находиться внутри каждого компонента и не влиять друг на друга

2. Вы можете добиться этого, но имея этот div в отдельном компоненте и управлять этим состоянием в этом компоненте.

Ответ №1:

Я создал что-то, что делает то же самое. Я извлек ваш код и создал компонент. теперь состояние находится внутри компонента и не влияет на другие.

живая демонстрация

компонент

 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>
  );
};

в css-файле у меня не было одинаковых классов, поэтому я создал свой.

 .faq-subject {
  background: blue;
}
.faq-subject-toggle-arrow {
  background: orange;
}

теперь вы можете использовать его везде, где захотите, несколько раз

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

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