Slick slider react?

Question

[SehiiSkachkov]

Как в реакте при смене слайда добавить к poster-inform-rating-output класс с анимацией ??
Я новенький не ругайте.
Вот 1 компонент

import React, { Component } from "react";
import Slider from "react-slick";
import './PosterSlider.sass';
import Slide_chevrolet from './poster_chevrolet.png';
import Slide_ford from './poster_ford.png';
import Slide_porshe from './poster_porshe.png';
import PosterItem from '../PosterItem/PosterItem';

class SimpleSlider extends Component {
    state = {
        cars: [
            {
                img: Slide_chevrolet,
                name:"Shevrolet Suburban",
                description:"Внедорожник класса «K3». Мировая премьера двенадцатого поколения модели состоялась в сентябре 2013 года.",
                engine: "5.3 л",
                transmission: "Автоматическая",
                unit: "Полный 4x4",
                places: "8 c Водителем",
                comfort: "100%",
                comfort_places: "80%",
                economy: "30%",
                price: "229"
            },
            {
                img: Slide_ford,
                name:"Ford Mustang",
                description:"Изначальный вариант был создан на базе агрегатов семейного седана Ford Falcon Первый серийный Mustang сошёл с конвейера 9 марта 1964 года как модель 1965 года",
                engine: "5.0 л",
                transmission: "Автоматическая",
                unit: "Передний",
                places: "4 с водителем",
                comfort: "100%",
                comfort_places: "28%",
                economy: "42%",
                price: "350"
            },
            {
                img: Slide_porshe,
                name:"Porsche Boxster",
                description:"Родстер компании Porsche с шестицилиндровым оппозитным мотором,расположенным продольно в центре. Модель первого поколения появилась в 1996 году,и была своеобразной преемницей модели Porsche 944",
                engine: "3.2 л",
                transmission: "Автоматическая",
                unit: "Полный 4x4",
                places: "2 c Водителем",
                comfort: "100%",
                comfort_places: "15%",
                economy: "57%",
                price: "599"
            }

        ]
    }
    render() {
        const settings = {
            dots: true,
            arrows: false,
            infinite: true,
            speed: 1000,
            fade: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            className: "poster-slider",
            afterChange: (prevIndex, nextIndex) =>{
               ?????
            }
        };
        
        return (
            <Slider {...settings}>
                {this.state.cars.map((car,index) => {
                    return (
                        <PosterItem
                            key={index}
                            img={car.img}
                            name={car.name}
                            description={car.description}
                            engine={car.engine}
                            transmission={car.transmission}
                            unit={car.unit}
                            places={car.places}
                            comfort={car.comfort}
                            comfort_places={car.comfort_places}
                            economy={car.economy}
                            price={car.price}
                        />
                    )
                }) }
            </Slider>
        );
    }
}

export default SimpleSlider;

--------------------------
Второй компонент
--------------------------

import React, { Component } from "react";
import './PosterItem.sass';

import RatingImgGray from './poster_raiting_gray.png';
import RatingImgOrange from './poster_raiting_orange.png';

const PosterItem = (props) => {
	return (
		<div className="poster-item" >
			<div className="poster-img">
				<img src={ props.img } alt="car" />
			</div>
			<div className="poster-about">
				<div className="poster-name">{props.name}</div>
				<div className="poster-descr">{props.description}</div>
				<div className="poster-inform">
					<div className="poster-inform-box">
						<div className="poster-inform-item">
							<div className="poster-inform-about">Обьем Двигателя</div>
							<div className="poster-inform-output">{props.engine}</div>
						</div>
						<div className="poster-inform-item">
							<div className="poster-inform-about">Трансмисия</div>
							<div className="poster-inform-output">{props.transmission}</div>
						</div>
						<div className="poster-inform-item">
							<div className="poster-inform-about">Привод</div>
							<div className="poster-inform-output">{props.unit}</div>
						</div>
						<div className="poster-inform-item">
							<div className="poster-inform-about">Количество мест</div>
							<div className="poster-inform-output">{props.places}</div>
						</div>
					</div>
					<div className="poster-inform-box">
						<div className="poster-inform-item">
							<div className="poster-inform-about">Комфорт</div>
							<div className="poster-inform-rating">
								<div className="poster-inform-rating-output" style={{width:props.comfort}}></div>
							</div>
						</div>
						<div className="poster-inform-item">
							<div className="poster-inform-about">Вместимость</div>
							<div className="poster-inform-rating">
								<div className="poster-inform-rating-output" style={{width:props.comfort_places}}></div>
							</div>
						</div>
						<div className="poster-inform-item">
							<div className="poster-inform-about">Экономичность</div>
							<div className="poster-inform-rating">
								<div className="poster-inform-rating-output" style={{width:props.economy}}></div>
							</div>
						</div>
						<div className="poster-price-box">
							<div className="poster-price">
								<span>${props.price}</span>/День
							</div>
							<a className="btn-add" href=""> Забронировать </a>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}

export default PosterItem;

Answer 1

[Андрей Охотников]

Добавить в переменную , напрмер так

let myClass = 'class';
<div className={myClass}>Content</div>

и в нужный момент менять myClass (добавить к нему еще один)

Comments

[SehiiSkachkov]

Да я понимаю как это должно быть приблизительно но не могу реализовать,не знаю как описать действие после изменения.
На jq описал бы без труда.

[Андрей Охотников]

SehiiSkachkov,

state = {
    activeSlide: 0
  };
  render() {

    const settings = {
      afterChange: current => this.setState({ activeSlide: current })
    };

вот так ты получаешь в стейте индекс активного слайда, а затем при рендере проверяешь - если индекс совпадает, добавляешь класс