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

如何根据幻灯片的当前索引显示不同的DIV内容？这是一个我在地图中循环的组件，图像、内容和id位于数据对象内部

我在这里尝试使用什么来根据当前索引显示不同的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;

import React，{Component}来自'React'；
//组成部分
从“../Slider/Slide”导入QuizSlide；
//从“../quick/QuizMain”导入QuizMain；
从“../Arrows/LeftArrow”导入LeftArrow；
从“../Arrows/RightArrow”导入RightArrow；
从“../Slider/Footer”导入页脚；
从“images/QuizLogo.svg”导入QuizLogo；
//应用程序样式
导入“sass/root.scss”；
导出默认类QuizSlider扩展组件{
//构造器
建造师（道具）{
超级（道具）；
此.state={
页脚URL:'http://www.google.nl',
页脚文字：“Naar网站STC”，
版权所有：“2018品牌之友”，
当前索引：0，
translateValue:0，
数据：[
{索引：1，内容：'Ga voor grenzelos'，图像：'https://images.pexels.com/photos/219014/pexels-photo-219014.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'},
{索引：2，内容：'Sectoren'，图像：'https://images.pexels.com/photos/259984/pexels-photo-259984.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'},
{索引：3，内容：'Wat wil jij'，图像：'https://images.pexels.com/photos/355952/pexels-photo-355952.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'},
{索引：4，内容：'Vlogs'，图像：'https://images.pexels.com/photos/320617/pexels-photo-320617.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'},
{索引：5，内容：“Belangrijke数据”，图像：'https://images.pexels.com/photos/1181316/pexels-photo-1181316.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940'}
]
}
}
//功能
上一张幻灯片=（）=>{
if（this.state.currentIndex==0）{
返回此.setState({
当前索引：0，
translateValue:0
})
}
//如果满足上述if条件，则不会运行此操作
this.setState（PrevState=>({
currentIndex:PrevState.currentIndex-1，
translateValue:PrevState.translateValue+（this.slideWidth（））
}));
}
NextSlide=（）=>{
const slideWidth=this.slideWidth（）；
//如果我们在images数组的末尾，则尽早退出该方法。
//我们还想重置currentIndex和translateValue，因此返回
//到数组中的第一个图像。
if（this.state.currentIndex==this.state.data.length-1）{
返回此.setState({
当前索引：0，
translateValue:0
})
}
//如果满足上述if条件，则不会运行此操作
this.setState（NextState=>({
currentIndex:NextState.currentIndex+1，
translateValue:NextState.translateValue+-（滑动方向）
}));
}
滑动宽度=（）=>{
return document.querySelector（'.QuizSlide'）.clientWidth
}
//渲染
render（）{
返回(
{
this.state.data.map（（道具，索引）=>(
))
}
)
}
}
从“React”导入React；
常量QuizSlide=（{image，content，id}）=>{
const currentIndexLide=id；
如果（CurrentIndexLide==1）{
在1上显示此数据。
}
如果（CurrentIndexLide==2）{
在2上显示此数据。
}
如果（CurrentIndexLide==3）{
在3上显示此数据。
}
返回(
{content}
{id}
)
}
导出默认QuizSlide；

在if语句之前使用

定义变量，然后在if语句中为其赋值，并在返回中显示该值

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;

constquizslide=（{image，content，id}）=>{
const currentIndexLide=id；
顺其自然；
如果（CurrentIndexLide==1）{
幻灯片=在1上显示此数据。
}    
如果（CurrentIndexLide==2）{
幻灯片=在2上显示此数据。
}    
如果（CurrentIndexLide==3）{
幻灯片=在3上显示此数据。
}    
返回(
{content}
{id}
{幻灯片}
)
}    
导出默认QuizSlide；
在呈现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>
)

返回(
{content}
{id}
{id=='1'&&
在1上显示此数据。
}
{id=='2'&&
在2上显示此数据。
}
)
content

属性中的数据是什么，如果我可以要求KDoESN不返回任何内容。。你能帮忙吗？我只能看到ID。ID是一个整数，我们已经检查了字符串（ID=='1'），相反，删除引号并检查整数（ID==1），应该可以。非常感谢@Manoj，还有一个问题。是否可以在每个差速器内传递和使用不同的部件