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

当您不将组件导出为默认值时，您无法默认导入它。 您可以将其导入为；

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)

Answer 3

看来您没有执行包含第二个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>
                )
            }
        })()}