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

Question

我正在尝试将每两个帖子包装在一个容器div中。下面是我尝试过的方法，但不幸的是我得到了一个错误。

这是我尝试的： 我有一个名为postIndex的变量。在使用posts.map(({ node }) => {...}遍历帖子时，我有条件地进行了if / else检查，以查看postIndex是奇数还是if (postIndex % 2 == 0)（检查postIndex是否是偶数） ）和if (postIndex % 2 == 1)（检查postIndex是否为奇数）。

如果postIndex甚至我仅渲染开头<div>标记，该标记是两个帖子的容器。如果postIndex为奇数，则仅渲染结束的</div>标签。

不过，我在此实现中遇到错误。做这样的事情的正确方法是什么？

我尝试过的例子：

    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>
    )

Answer 1

没有结束标记的开始标记是无效的JSX。您可能可以在下面执行类似的操作。另外，您可以访问地图中数组的索引，因此无需创建新变量。

maybeNullInt?.runIfNotNull { doSomething }