Javascript 如何在循环中设置样式

今天我正在制作一个幻灯片功能。我刚刚做了一个循环，我想在循环中设置一个元素的样式，但那是错误的

slideshow.js：

import React from 'react';

let slideIndex = [1, 1];
let slideId = ["slide"];
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
} 

function showSlides(n, no) {
    let i;
    let x = document.getElementsByClassName(slideId[no]);
    if (n > x.length) {
        slideIndex[no] = 1
    }
    if (n < 1) {
        slideIndex[no] = x.length
    }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex[no]-1].style.display = "block";
}

const SlideShow = (props) => {
    return (
        <div className={'slide'} style={{
            display: 'none',
            textAlign: 'center'
        }}>
           <img src={props.logo} className={'logo-banner'} style={{
                verticalAlign: 'center'
            }}/>
            <a className={"prev-photo"} onClick={plusSlides(-1, 1)}>&#10094;</a>
            <a className={"next-photo"} onClick={plusSlides(1, 1)}>&#10095;</a>
        </div>
    )
};

export default SlideShow;

从“React”导入React；
设slideIndex=[1,1]；
让slided=[“slide”]；
放映幻灯片（1,0）；
放映幻灯片（1,1）；
函数加滑块（n，否）{
放映幻灯片（幻灯片索引[no]+=n，no）；
} 
功能演示幻灯片（n，否）{
让我；
设x=document.getElementsByClassName（slideId[no]）；
如果（n>x.length）{
幻灯片索引[编号]=1
}
if（n<1）{
slideIndex[编号]=x.length
}
对于（i=0；i{
返回(
❮
❯
)
};
导出默认幻灯片；

---

我的问题发生在第22行和第24行。因为我给了它一个样式。显示，但这不起作用。。。其他人有更好的解决方案。请让我知道

在使用React时，应该避免像这样直接操作DOM。这样做会干扰React，导致意外行为

相反，您可以存储当前幻灯片并控制以这种方式显示的幻灯片

这里有一个例子。你可以用更高阶的组件来控制幻灯片，如果你愿意的话，可以把它们作为道具传递

class SlideShow extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            slides: ['slide-img01.png', 'slide-img02.png'],
            currentSlideIndex: 0
        };
    }

    handleNext () {
        this.setState({
            currentSlideIndex: this.state.currentSlideIndex + 1
        });
    }

    handlePrev () {
        this.setState({
            currentSlideIndex: this.state.currentSlideIndex - 1
        });
    }

    render () {
        const { slides, currentSlideIndex } = this.state;

        return (
            <div className={'slide'}>
                {slides.map((slide, index) =>
                    <img
                        key={index}
                        src={slide} className={'logo-banner'} 
                        style={index === currentSlideIndex
                            ? { verticalAlign: 'center' }
                            : { verticalAlign: 'center', display: 'none' }} />
                )}

                <a className={"prev-photo"} onClick={handlePrev.bind(this)}>&#10094;</a>
                <a className={"next-photo"} onClick={handleNext.bind(this)}>&#10095;</a>
            </div>
        );
    }
}

类幻灯片扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
幻灯片：['slide-img01.png'，'slide-img02.png']，
currentSlideIndex:0
};
}
handleNext（）{
这是我的国家({
currentSlideIndex:this.state.currentSlideIndex+1
});
}
handlePrev（）{
这是我的国家({
currentSlideIndex:this.state.currentSlideIndex-1
});
}
渲染（）{
const{slides，currentSlideIndex}=this.state；
返回(
{slides.map（（幻灯片，索引）=>
)}
❮
❯
);
}
}

请注意，

map（）

的原因是，如果需要，您可以在幻灯片之间添加过渡。否则，可以避免同时渲染非当前图像。