как стиль в Аль oop Реагировать

Question

Сегодня я работаю над функцией слайд-шоу. Я только что сделал al oop, и я хотел бы стилизовать элемент в l oop, но это пошло не так.

слайд-шоу. 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

Вы должны избегать манипулирования DOM напрямую, как это при использовании 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>
        );
    }
}