как это получить в react js . добавлять классы

Question

const slides = document.querySelectorAll('.slide');

for (const slide of slides) {
    slide.addEventListener('click', () => {
        clearActiveClasses();

        slide.classList.add('active');
    });
};

function clearActiveClasses() {
    slides.forEach((slide) => {
        slide.classList.remove('active');
    });
};

Answer 1

Можно хранить состояние активного слайда в хуке useState. И затем в зависимости от состояния добавлять или убирать класс. Получается примерно так:

// import React from "react";

const App = () => {
  const [activeSlide, setActiveSlide] = React.useState(0);
  return (
    <div>
      {[...Array(10)].map((_, idx) => {
        const isActive = activeSlide === idx;
        return (
          <button
            key={idx}
            className={isActive ? "active" : ""}
            style={{ backgroundColor: isActive ? "red" : "white" }}
            onClick={() => setActiveSlide(idx)}
          >
            <div>Slide #: {idx}</div>
            <div>isActive = {isActive.toString()}</div>
          </button>
        );
      })}
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

как это получить в react js . добавлять классы

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