Как написать логику js в react.js

Question

Всем привет. Я новичок в react.js. Я написал слайдер на js. Все работает идеально, но вот проблема в том, что я практически нулевой в react.js. Я посмотрел куча роликов, гуглил, читал документацию и все равно безрезультатно. У меня есть react component Contentlist который принимает пропсы: массив -> directions и массив -> thumbnails вот мой код

import React, { useEffect, useState } from "react";

export default function Contentlist({ directions, thumbnails }) {
  const [selectedItemIndex, setSelectedItemIndex] = useState(0);
  const handleClick = (index) => {
    setSelectedItemIndex(directions[index]);
    setSelectedItemIndex(thumbnails[index]);
  };
  return (
    <>
      <div className={`caorusel ${selectedItemIndex ? "_next" : ""}`}>
        <div className="caorusel__list">
          {directions?.map((direction) => (
            <div className="caorusel__item" key={direction.id}>
              <img src={`${direction.img}`} />
              <div className="caorusel__content">
                <div className="caorusel__title">{direction.title}</div>
                <div className="caorusel__description">
                  {direction.description}
                </div>
                <div className="caorusel__button">
                  <button>Перейти</button>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="thumbnail__list">
          {thumbnails?.map((thumbnail, index) => (
            <div className="thumbnail__item" key={thumbnail.id}>
              <img
                src={`${thumbnail.img}`}
                onClick={() => handleClick(index)}
              />
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

При нажатии на элемент <div className="thumbnail__item"> у меня к элементу <div className="caorusel"/> добавляется класс "_next" . Вот стили которые должны работать при нажатии на картинку <div className="thumbnail__item">

.caorusel._next .caorusel__item:nth-child(1) img {
  width: 180px;
  height: 250px;
  position: absolute;
  left: 50%;
  bottom: 50px;
  border-radius: 20px;
  animation: showImage 0.5s linear 1 forwards;
}
.caorusel._next .thumbnail__list {
  transform: translateX(180px);
  animation: transformThumbnail 0.5s linear 1 forwards;
}
@keyframes transformThumbnail {
  to {
    transform: translateX(0);
  }
}
@keyframes showImage {
  to {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 0;
  }
}

А вот код который я писал на js

const caoruselList = document.querySelector(".caorusel__list");
const thumbnail = document.querySelector(".thumbnail__list");
const caorusel__item = document.querySelectorAll(".caorusel__item");
const thumbnail__item = document.querySelectorAll(".thumbnail__item");

thumbnail__item.forEach((elem, index) => {
  elem.addEventListener("click", () => {
    caoruselList.appendChild(caorusel__item[index]);
    thumbnail.appendChild(thumbnail__item[index]);
    document.querySelector(".caorusel").classList.add("_next");
  });
});

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

Answer 1

В отличие от ванильного JavaScript, в React мы управляем состоянием через useState

Вместо того чтобы вручную добавлять или удалять классы с элементов, вы должны условно добавлять классы на основе состояния

import React, { useState } from "react";

export default function Contentlist({ directions, thumbnails }) {
  // Устанавливаем индекс выбранного элемента
  const [selectedItemIndex, setSelectedItemIndex] = useState(0);

  // Функция для обработки клика по миниатюре
  const handleClick = (index) => {
    setSelectedItemIndex(index);
  };

  return (
    <>
      <div className={`caorusel ${selectedItemIndex !== 0 ? "_next" : ""}`}>
        <div className="caorusel__list">
          {directions.map((direction, index) => (
            <div
              className={`caorusel__item ${index === selectedItemIndex ? "active" : ""}`}
              key={direction.id}
            >
              <img src={`${direction.img}`} alt={direction.title} />
              <div className="caorusel__content">
                <div className="caorusel__title">{direction.title}</div>
                <div className="caorusel__description">
                  {direction.description}
                </div>
                <div className="caorusel__button">
                  <button>Перейти</button>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="thumbnail__list">
          {thumbnails.map((thumbnail, index) => (
            <div
              className={`thumbnail__item ${index === selectedItemIndex ? "selected" : ""}`}
              key={thumbnail.id}
              onClick={() => handleClick(index)}
            >
              <img src={`${thumbnail.img}`} alt={`Thumbnail ${index + 1}`} />
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

БЛОГ НА HUSL

Как написать логику js в react.js

Ответы (1 шт):