[英]if statement does nothing while checking
I'm working on a photo slider, but an if statement doesn't work... I've got 2 if statement.我正在处理照片滑块,但 if 语句不起作用...我有 2 个 if 语句。 One if statement works perfectly, while the other one does nothing.
一个 if 语句完美运行,而另一个则什么也不做。
Code:代码:
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)}><
</button>
)
}
})()}
{(() => {
if (!currentImage >= partners.length) {
return (
<button className={'next-photo'}
style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
onClick={() => setCurrentImage(currentImage + 1)}>></button>
)
}
})}
<div style={{textAlign: 'center'}}>
{(currentImage + 1) + '/' + partners.length}
</div>
</div>
)
};
Here you've my code.这是我的代码。 The last if statement does nothing.
最后一个 if 语句什么都不做。 I hope someone can figure out where the error occurs.
我希望有人能找出错误发生的地方。 Thank you in advance.
先感谢您。
Hi this answer works嗨,这个答案有效
see the code live :实时查看代码:
https://codesandbox.io/s/gallant-mountain-18yu8?fontsize=14&hidenavigation=1&theme=dark https://codesandbox.io/s/gallant-mountain-18yu8?fontsize=14&hidenavigation=1&theme=dark
you need to add ()
to the end of the JSX function for the right arrow您需要将
()
添加到右箭头的 JSX 函数的末尾
also use this conditions instead也使用此条件代替
if (currentImage < partners.length-1) {
and和
if (currentImage > 0) {
When you do not export your component as default you can not default import it.当您不将组件导出为默认值时,您无法默认导入它。 either you can import it as;
您可以将其导入为;
import {SlideShow} from 'SlideShow';
Or export it as default或将其导出为默认值
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)}><
</button>
)
}
})()}
{(() => {
if (!currentImage >= partners.length) {
return (
<button className={'next-photo'}
style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
onClick={() => setCurrentImage(currentImage + 1)}>></button>
)
}
})}
<div style={{textAlign: 'center'}}>
{(currentImage + 1) + '/' + partners.length}
</div>
</div>
)
};
export default Slideshow;
Also, if currentImage starts from 0. then you have to modify your condition as此外,如果 currentImage 从 0 开始,那么您必须将条件修改为
(!currentImage > partners.length)
It appears you are not executing the function containing the second if
statement.看来您没有执行包含第二个
if
语句的函数。
Try to add a ()
at the end, such that it becomes尝试在末尾添加一个
()
,使其变为
{(() => {
if (!currentImage >= partners.length) {
return (
<button className={'next-photo'}
style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
onClick={() => setCurrentImage(currentImage + 1)}>></button>
)
}
})()}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.