如何在带有 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 中的条件可以采用不同的形式,这些是我更喜欢的一些形式:

如果存在(隐含的&amp;&amp;

 arr.map( (item) => 
  return(
    item.condition &&
    <div className="whatever">Your Content</div>
  )
)

如果满足条件(&amp;&amp; 的条件)

 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 &lt;&gt;&lt;/&gt; 中 - 这些将您的 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?

如何在 Next.js/React 中使用带有 @prismicio/client 库的时间线参考

使用 React 映射图像数组时如何创建图像背景渐变

如何从 Next.js 中的服务器获取 HOC 中的数据?