![](/img/trans.png)
[英]Next.js: How to use source-map-explorer with Next.js
[英]How to use if statement in array map function with next.js
如果索引号的余数为 0,我想包装我需要在下面和下面显示的代码。 我怎样才能做到这一点? 我尝试了下面的方法,但没有奏效。 我收到语法错误。
{索引% 3 == 0? ...:...}
{index% 3 == 0 &&...}
export default function UserPosts() {
// some code...
return (
<div className={styles.userPosts}>
{postsList.map((post, index) => {
return (
if (index % 3 == 0) {
<div className={styles.userPostsRow}>
}
<div className={styles.userPostWrapper}>
<div className={styles.userPostColumn}>
<Link href={`/${username}`}>
<a>
<div className={styles.userPost}>
<img src={post.image} alt="" />
</div>
</a>
</Link>
</div>
</div>
if (index % 3 == 0) {
</div>
}
)
})}
</div>
)
}
为了减少 JSX 重复,您可以将条件逻辑提取到将包装子组件的组件中。
const ConditionalWrapper = ({ children, condition }) => {
return condition ? (
<div className={styles.userPostsRow}>{children}</div>
) : (
children
)
}
export default function UserPosts() {
// some code...
return (
<div className={styles.userPosts}>
{postsList.map((post, index) => {
return (
<ConditionalWrapper condition={index % 3 == 0}>
<div className={styles.userPostWrapper}>
<div className={styles.userPostColumn}>
<Link href={`/${username}`}>
<a>
<div className={styles.userPost}>
<img src={post.image} alt="" />
</div>
</a>
</Link>
</div>
</div>
</ConditionalWrapper>
)
})}
</div>
)
}
在您的return
语句中,您需要使用 JSX。 JSX 中的条件可以采用不同的 forms,这些是我喜欢的一些:
如果存在某些东西(隐式&&
) :
{ arr.map( (item) => {
return(
item.condition &&
<div className="whatever">Your Content</div>
)
})}
如果满足条件(带有&&
的条件)
{ arr.map( (item, index) => {
return(
item.index % 3 &&
<div className="whatever">Your Content</div>
)
})}
if/else 块(使用三元? (): ()
)
{ arr.map( (item, index) => {
return(
item.index % 3 ? (
<>
<div className="whatever">True catch condition</div>
<div className="whatever">Multiple HTML lines</div>
</>
) : (
<div className="whatever">False catch condition</div>
)
)
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.