如何在带有 next.js 的数组映射函数中使用 if 语句
Posted
技术标签:
【中文标题】如何在带有 next.js 的数组映射函数中使用 if 语句【英文标题】:How to use if statement in array map function with next.js 【发布时间】:2021-04-15 20:01:18 【问题描述】:如果索引号的余数为 0,我想包装我需要在下面和下面显示的代码。我怎样才能做到这一点?我尝试了下面的那些,但它没有用。我遇到语法错误。
index% 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 />
</div>
</a>
</Link>
</div>
</div>
if (index % 3 == 0)
</div>
)
)
</div>
)
【问题讨论】:
【参考方案1】:在您的return
语句中,您需要使用 JSX。 JSX 中的条件可以采用不同的形式,这些是我更喜欢的一些形式:
如果存在(隐含的&&
):
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>
)
)
)
【讨论】:
当我按照你上面提到的那样做时,代码的最后一部分在我的编辑器中没有着色,它实际上工作不正确。我认为这里失败的原因是因为 div 元素直接在下面关闭。在我看来,jsx 无法理解它是在上面打开的。编辑:cdn.discordapp.com/attachments/793604426144415778/…工作图片:cdn.discordapp.com/attachments/793604426144415778/… 您的代码中有几个错误。您想将整个三元表达式包装在()
中。而在 JSX 中,所有 HTML 都被读取为 JS(如果您是新手,可能会感到困惑)。因此,您一次只能返回一个对象。因此,您需要将所有 HTML 包装在 React Fragments <></>
中 - 这些将您的 HTML 合并到一个对象中。我更新了我的示例以向您展示,请查看。【参考方案2】:
为了减少 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 />
</div>
</a>
</Link>
</div>
</div>
</ConditionalWrapper>
)
)
</div>
)
【讨论】:
以上是关于如何在带有 next.js 的数组映射函数中使用 if 语句的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Next.js 中使用带有顺风 css 的 React Suite?
如何在带有 TypeScript 的 next.config.js 中使用 i18n 和 next/image?
如何在 next.js 中使用带有样式组件主题的 window.matchMedia?