React/Gatsby:有条件地将每两个post包装在一个div中

import React from 'react';
import { graphql } from 'gatsby';

const PostList = ({ data }) => {
  const posts = data.allMarkdownRemark.edges;

  return (
    <div>
      {posts.map((post, index) => {
        const { node } = post;
        const shouldWrap = index % 2 === 0; // 每两个post包装一个div

        if (shouldWrap) {
          return (
            <div key={node.id}>
              <h2>{node.frontmatter.title}</h2>
              <p>{node.excerpt}</p>
            </div>
          );
        } else {
          return (
            <React.Fragment key={node.id}>
              <h2>{node.frontmatter.title}</h2>
              <p>{node.excerpt}</p>
            </React.Fragment>
          );
        }
      })}
    </div>
  );
};

export const query = graphql`
  query {
    allMarkdownRemark {
      edges {
        node {
          id
          frontmatter {
            title
          }
          excerpt
        }
      }
    }
  }
`;

export default PostList;