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

if语句在检查时不执行任何操作

3 个答案: