оператор if ничего не делает при проверке

Question

Я работаю над слайдером фотографий, но оператор if не работает ... У меня 2 оператора if. Один оператор if работает отлично, а другой ничего не делает.

Код:

import React, {useState} from "react"

export const Slideshow = () => {
    const partners = ["/partners/logo_wp.jpg", "/partners/logo_van_leeuwen.png",     "/partners/logo_kennelservices.png", "/partners/logo_beckhuis.jpg",     "/partners/logo_kabeldirect.png", "/partners/logo_kremer.png"];

const [currentImage, setCurrentImage] = useState(0);

return (
    <div style={{position: "relative"}}>
        <div style={{
            display: "flex",
            transform: `translateX(-${currentImage * 100}%)`,
            transition: "transform .25s ease"
        }}>
            {partners.map(partner => <div
                style={{flexBasis: "33.333%", flexShrink: 0, display: "flex", justifyContent: "center"}}>
                <img src={partner} style={{
                    height: '120px'
                }}/>
            </div>)}
        </div>

        {(() => {
            if (!currentImage <= 0) {
                return (
                    <button className={'prev-photo'}
                            style={{position: "absolute", left: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage - 1)}>&lt;
                    </button>
                )
            }
        })()}

        {(() => {
            if (!currentImage >= partners.length) {
                return (
                    <button className={'next-photo'}
                            style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage + 1)}>&gt;</button>
                )
            }
        })}

        <div style={{textAlign: 'center'}}>
            {(currentImage + 1) + '/' + partners.length}
        </div>
    </div>
)
};

Вот мой код. Последнее выражение if ничего не делает. Я надеюсь, что кто-то может выяснить, где происходит ошибка. Заранее спасибо.

Answer 1

Привет, этот ответ работает

посмотреть код вживую:

https://codesandbox.io/s/gallant-mountain-18yu8?fontsize=14&hidenavigation=1&theme=dark

вам нужно добавить () к конец функции JSX для стрелки вправо

также используйте вместо этого условия

if (currentImage < partners.length-1) {

и

if (currentImage > 0) {

Answer 2

Похоже, вы не выполняете функцию, содержащую второй оператор if.

Попробуйте добавить () в конце, так что оно станет

        {(() => {
            if (!currentImage >= partners.length) {
                return (
                    <button className={'next-photo'}
                            style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage + 1)}>&gt;</button>
                )
            }
        })()}

Answer 3

Если вы не экспортируете свой компонент по умолчанию, вы не можете импортировать его по умолчанию. Либо вы можете импортировать его как;

import {SlideShow} from 'SlideShow';     

Или экспортировать по умолчанию

const Slideshow = () => {
    const partners = ["/partners/logo_wp.jpg", "/partners/logo_van_leeuwen.png",     "/partners/logo_kennelservices.png", "/partners/logo_beckhuis.jpg",     "/partners/logo_kabeldirect.png", "/partners/logo_kremer.png"];

const [currentImage, setCurrentImage] = useState(0);

return (
    <div style={{position: "relative"}}>
        <div style={{
            display: "flex",
            transform: `translateX(-${currentImage * 100}%)`,
            transition: "transform .25s ease"
        }}>
            {partners.map(partner => <div
                style={{flexBasis: "33.333%", flexShrink: 0, display: "flex", justifyContent: "center"}}>
                <img src={partner} style={{
                    height: '120px'
                }}/>
            </div>)}
        </div>

        {(() => {
            if (!currentImage <= 0) {
                return (
                    <button className={'prev-photo'}
                            style={{position: "absolute", left: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage - 1)}>&lt;
                    </button>
                )
            }
        })()}

        {(() => {
            if (!currentImage >= partners.length) {
                return (
                    <button className={'next-photo'}
                            style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage + 1)}>&gt;</button>
                )
            }
        })}

        <div style={{textAlign: 'center'}}>
            {(currentImage + 1) + '/' + partners.length}
        </div>
    </div>
)
};

export default Slideshow;

Кроме того, если currentImage начинается с 0. Тогда вы должны изменить свое условие как

(!currentImage > partners.length)