如何在带有 next.js 的数组映射函数中使用 if 语句答案

【问题标题】：How to use if statement in array map function with next.js如何在带有 next.js 的数组映射函数中使用 if 语句
【发布时间】：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} alt="" />
                                    </div>
                                </a>
                            </Link>
                        </div>
                    </div>
                    if (index % 3 == 0) {
                        </div>
                    }
                )                
            })}
        </div>
    )
}

【问题讨论】：

标签： javascript reactjs next.js jsx conditional-operator

【解决方案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} alt="" />
                                        </div>
                                    </a>
                                </Link>
                            </div>
                       </div>
                   </ConditionalWrapper>
                )                
            })}
        </div>
    )
}

【讨论】：