Reactjs React/Gatsby：有条件地将每两个帖子包装在一个div中

我试图将每两篇文章包装在一个容器div中。下面是我尝试的内容，但不幸的是，我得到了一个错误

这就是我所尝试的： 我有一个名为

postIndex

的变量。当使用

posts.map（（{node}）=>{…}

迭代帖子时，我有一个条件if/else检查，看看

postIndex

是奇数还是偶数，如果（postIndex%2==0）（检查

postIndex

是偶数）和

if（postIndex%2==1）

（检查

postIndex

是奇数）

如果

postIndex

为偶数，则仅渲染两篇文章的容器开头的

标记。如果

postIndex

为奇数，则仅渲染结尾的

标记

但是，我在这个实现中遇到了一个错误。这样做的正确方法是什么

我尝试的示例：

    let postIndex = 0

    return (
      <Layout>    
        {posts.map(({ node }) => {
          if (postIndex % 2 == 0) {
            postIndex++
            return (
               <div>
                <p>test</p>
            )
          } else if(postIndex % 2 == 1) {
            postIndex++
            return (
              <p>Test</p>
             </div>
            )
          }
        })
        }
      </Layout>
    )

让postIndex=0
返回(
{posts.map（{node}）=>{
如果（后索引%2==0）{
后索引++
返回(
试验

)
}否则如果（后索引%2==1）{
后索引++
返回(
试验

)
}
})
}
)

没有结束标记的开始标记是无效的JSX。您可能可以执行以下操作。此外，您可以访问映射中数组的索引，因此不需要创建新变量

return (
  <Layout>    
    {posts.map(({ node }, index) => {
      if (index % 2 === 0) {
        return (
           <div key={index}>
            <p>{node}</p>
            {posts[index + 1] && <p>{posts[index + 1].node}</p>}
           </div>
        )
      }
    })
    }
  </Layout>
)

返回(
{posts.map（（{node}，index）=>{
如果（索引%2==0）{
返回(
{node}

{posts[index+1]&&&p>{posts[index+1].node}
}
)
}
})
}
)

我想你可以找到一个每次迭代I+2的for循环的解决方案，而不是使用map。谢谢你，我回家后会好好看一看，然后再回到你身边谢谢你还提到了

map

有

index

。这真的很有帮助。关于这一点，我有两个问题--1）这里的

key={index}

的意义是什么？2）假设

posts

包含10个条目，

map

如何知道我想要从0索引到2索引再到4索引，等等？我想我应该考虑一下除了<代码> map < /C>以外的其他东西——不确定。实际上，我想我现在得到了——在索引>代码>索引% 2！0，它将跳过该项。这很酷。再次感谢。