Question

如何基于幻灯片的当前索引显示不同的DIV内容？这是我正在遍历MAP的组件，图像，内容和ID 位于DATA对象中。

我要在此处试图根据currentIndex显示不同的HTML /内容，我该如何使其工作？

我在做什么错？当前，它将在每个幻灯片上显示所有索引幻灯片。

谢谢！

import React, { Component } from 'react';

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

import QuizLogo from 'images/QuizLogo.svg';

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

export default class QuizSlider extends Component {

    // The Constructor
    constructor(props) {
        super(props);

        this.state = {
            footerURL: 'http://www.google.nl',
            footerText: 'Naar website STC',
            copyright: 'Friends For Brands 2018',
            currentIndex: 0,
            translateValue: 0,
            data: [
                {index: 1, content: 'Ga voor grenzeloos',  image: 'https://images.pexels.com/photos/219014/pexels-photo-219014.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'},
                {index: 2, content: 'Sectoren', image: 'https://images.pexels.com/photos/259984/pexels-photo-259984.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'},
                {index: 3, content: 'Wat wil jij?', image: 'https://images.pexels.com/photos/355952/pexels-photo-355952.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'},
                {index: 4, content: 'Vlogs', image: 'https://images.pexels.com/photos/320617/pexels-photo-320617.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'},
                {index: 5, content: 'Belangrijke data', image: 'https://images.pexels.com/photos/1181316/pexels-photo-1181316.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'}
            ]
        }
    }

    // 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 = () => {
        const slideWidth = this.slideWidth();
        // 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 + -(slideWidth)
        }));
    }

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

    // Render
    render() {
        return (
            <div className="QuizSlider">
                <div className="QuizLogo">
                    <img src={QuizLogo}/>
                </div>

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

                <div className="slider-wrapper" style={{ transform: `translateX(${this.state.translateValue}px)` }}>
                {
                    this.state.data.map((props, index) => (
                        <QuizSlide key={index} content={props.content} id={index + 1} image={props.image} />
                    ))
                }
                </div>
                <Footer url={this.state.footerURL} text={this.state.footerText} copyright={this.state.copyright} />
            </div>
        )
    }
}



import React from 'react';

const QuizSlide = ({image, content, id}) => {

    const currentIndexSlide = id;

    if(currentIndexSlide === 1) {
        <div className="slide-1">Show this data on 1.</div>
    }

    if(currentIndexSlide === 2) {
        <div className="slide-2">Show this data on 2.</div>
    }

    if(currentIndexSlide === 3) {
        <div className="slide-3">Show this data on 3.</div>
    }

    return (
        <div className="QuizSlide" style={{backgroundImage: `url(${image})`}}>
            <div className="QuizSlide--content">
                <h2>{content}</h2>
                {id}
            </div>
        </div>
    )
}

export default QuizSlide;

Answer 1

在if语句之前使用let定义一个变量，然后在这些变量中为其分配一个值，并在返回值中显示该变量。

const QuizSlide = ({image, content, id}) => {    

    const currentIndexSlide = id;
    let slide;

    if(currentIndexSlide === 1) {
        slide = <div className="slide-1">Show this data on 1.</div>
    }    

    if(currentIndexSlide === 2) {
        slide = <div className="slide-2">Show this data on 2.</div>
    }    

    if(currentIndexSlide === 3) {
        slide = <div className="slide-3">Show this data on 3.</div>
    }    

    return (
        <div className="QuizSlide" style={{backgroundImage: `url(${image})`}}>
            <div className="QuizSlide--content">
                <h2>{content}</h2>
                {id}
                {slide}
            </div>
        </div>
    )
}    

export default QuizSlide;

Answer 2

在呈现 HTML DOM 的返回部分中，您正在显示全部内容。每次在通过地图迭代数组时调用 QuizSlide 组件，因此都会显示所有数据。

因此，限制应在render部分内。条件渲染应类似于：

return (
    <div className="QuizSlide" style={{backgroundImage: `url(${image})`}}>
        <div className="QuizSlide--content">
            <h2>{content}</h2>
            {id}
            {id === '1' &&
                <div className="slide-1">
                    Show this data on 1. 
                </div>
            }
            {id === '2' &&
                <div className="slide-2">
                    Show this data on 2. 
                </div>
            }
        </div>
    </div>
)

如何使用React根据当前索引显示不同的DIV内容？

2 个答案: