Question

如果有人可以帮助我，我将非常感激。我正在使用React工作1个月，目前正在使用Slider。我需要一些帮助，我正在尝试为每个幻灯片动态添加一个类“ first”和“ last”。我有一个Click事件 PrevSlide 和 NextSlide ，它们将滑动到下一张和上一张幻灯片。但是，如果到达第一张或最后一张幻灯片，我想向“上一个/下一个”按钮添加一个类。相反，它现在将相同的类添加到渲染时的所有幻灯片。另外，如何在Click上添加当前的Active ClassName？

有人可以向我解释如何做吗？提前致谢！所以我可以从中学到东西。

我的代码：

import React, { Component } from 'react';

// Components
import QuizSlide from '../Slider/Slide';
import LeftArrow from '../Arrows/LeftArrow';
import RightArrow from '../Arrows/RightArrow';

// Import Pictures
import Slide1 from 'images/slider/1.jpeg';
import Slide2 from 'images/slider/2.jpeg';
import Slide3 from 'images/slider/3.jpeg';
import Slide4 from 'images/slider/4.jpeg';
import Slide5 from 'images/slider/5.jpeg';

// App Styles
import 'sass/root.scss';

export default class QuizSlider extends Component {

    // Constructor
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            translateValue: 0,
            data: [
                {
                    content: 'Slide show 1',
                    image: `${Slide1}`
                },

                {
                    content: 'Slide show 2',
                    image: `${Slide2}`
                },

                {
                    content: 'Slide show 3',
                    image: `${Slide3}`
                },

                {
                    content: 'Slide show 4',
                    image: `${Slide4}`
                },

                {
                    content: 'Slide show 5',
                    image: `${Slide5}`
                }
            ]
        }
    }

    // Functions
    PrevSlide = () => {
        if(this.state.currentIndex === 0) {
          return this.setState({
            currentIndex: 0,
            translateValue: 0
          });
        }

        // This will not run if we met the if condition above
        this.setState(PrevState => ({
            currentIndex: PrevState.currentIndex - 1,
            translateValue: PrevState.translateValue + (this.slideWidth())
        }));        
    }

    NextSlide = () => {
        // Exiting the method early if we are at the end of the images array.
        // We also want to reset currentIndex and translateValue, so we return
        // to the first image in the array.
        if(this.state.currentIndex === this.state.data.length - 1) {
          return this.setState({
            currentIndex: 0,
            translateValue: 0
          });
        }

        // This will not run if we met the if condition above
        this.setState(NextState => ({
            currentIndex: NextState.currentIndex + 1,
            translateValue: NextState.translateValue + -(this.slideWidth())
        }));
    }

    slideWidth = () => {
        return document.querySelector('.QuizSlide').clientWidth
    }   

    // Render
    render() {
        return (
            <div className="QuizSlider">

                <div
                  className="slider-wrapper" 
                  style={{
                    transform: `translateX(${this.state.translateValue}px)`,
                    transition: 'transform ease-out 0.45s'
                  }}
                >

                {
                    this.state.data.map((props, index) => (
                        <QuizSlide key={index} image={props.image}  />
                    ))
                }  

                </div>

                <LeftArrow PrevSlide={this.PrevSlide} />
                <RightArrow NextSlide={this.NextSlide} />
            </div>
        );
    }
}

Answer 1

您可以在映射数据时有条件地渲染渲染器中的第一个，最后一个和活动类

here's an example to check out并带有注释，以帮助解释发生了什么。打开开发工具以查看类渲染

OnClick-如何在React中为每张幻灯片添加第一个，最后一个和活动的ClassName？

1 个答案: