Блог

Главная - Вопросы по программированию - Условная логика имени класса React блокирует переход, не зная, почему

Условная логика имени класса React блокирует переход, не зная, почему

#javascript #css #reactjs

Вопрос:

Я пытаюсь создать аккордеон с помощью React. Я задал вопрос об этом ранее в StackOverflow с точки зрения того, как назначить классы аккордеону по щелчку и открыть несколько одновременно. Кто-то связал меня с песочницей кода ниже, которая будет переключать цвет фона по щелчку.

https://codesandbox.io/s/nice-http-n0omm?file=/src/App.js

Итак, я попытался вставить его в свой код, чтобы открывать и закрывать аккордеон, и он не перейдет, что бы я ни делал. Это мгновенное изменение, и я, кажется, не могу понять, почему. Я также попытался сделать переход от синего цвета bg к красному, и то же самое, он мгновенно меняется без перехода.

Может кто — нибудь взглянуть на мой код и помочь разобраться в нем?

Единственное различие, которое я заметил в разнице между песочницей кода и моим кодом, заключается в том, что в версии песочницы, в элементе dom, использующем проверку, при нажатии кнопки только выбранный элемент мигает фиолетовым (chrome), чтобы указать, что что-то изменилось. В моей версии КАЖДЫЙ экземпляр карты мигает фиолетовым цветом, указывая на то, что все отображенные элементы были каким-то образом затронуты.

   const [accordionOpen, setAccordionOpen] = useState([]);


  function openAccordion(num) {
    setAccordionOpen((state) => {
      return state.includes(num)
        ? state.filter((n) => n !== num)
        : [...state, num];
    });
  }




return parsedData.map((data) => {
<>
<div
                className="mortgage_moreinfo"
                onClick={() => openAccordion(data.ProductCode)}
                key={data.ProductCode}
              >
                <p>More Info</p>
              </div>
</>
})

SCSS

 .accordionClosed {
  transition: all 1s ease;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordionOpen {
  max-height: 101px !important;
}

Ответ №1:

Попробуйте что-нибудь подобное для вашего scss:

 .accordion {
  max-height: 0;
  overflow: hidden;
  transition: all 1s ease;
  transition: max-height 0.2s ease-out;
}

.accordion.open {
  max-height: 101px !important;
}

И для вашего компонента React:

  <div className=`accordion ${ConditionForOpeningTheAccordion ? 'open' : ''}`>
 </div>

Таким образом, у вас в основном есть .accordion класс, который определяет основной стиль для вашего аккордеона, но с вашим ростом 0 пикселей. И когда ваше условие для открытия аккордеона будет выполнено, вы добавите .open класс к аккордеону, ширина которого составляет 101 пикселей. Это должно гарантировать, что ваш переход воспроизводится каждый раз .open , когда класс удаляется или добавляется на аккордеон.

Я надеюсь, что мое объяснение поможет вам. Если нет, я могу предоставить кодовое поле или что-то в этом роде.

Метки: , ,