如何在循环中设置样式 React

Question

今天我正在研究幻灯片功能。我刚刚创建了一个循环，我想在循环中设置一个元素的样式，但是出错了。

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;

我的问题出现在第 22 行和第 24 行。因为我给了它一个 style.display，但这不起作用...有其他人更好的解决方案。请告诉我！

Answer 1

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

相反，您可以将当前幻灯片存储在 component state 中并控制以这种方式显示哪张幻灯片。

这是一个例子。如果您愿意，您可以在更高阶的组件中控制幻灯片，并将它们作为道具传递。

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>
        );
    }
}