从.map中选择一个网格元素

Question

我有一个网格，我需要选择第四个元素，并在下一行从第一列移动到第二列。我知道如何在纯html中做到这一点，但不知道如何在地图中选择网格元素。

代码如下:

return (
<Layout pageTitle='Projects'>
<GridIndex>
{data.allMdx.nodes.map((node) => (
<article key={node.id} className=''>
<Link to={`/projects/${node.slug}`}>
<div>{node.frontmatter.title}</div>
<GatsbyImage
image={getImage(node.frontmatter.imageCover)}
alt={node.frontmatter.imageCoverAlt}
className='h-auto xs:square'
/>
</Link>
</article>
))}
</GridIndex>
</Layout>
);
};

我只需要选择第四个元素并输入这个className:className='col-start-2'

这里有一个图像来理解这个问题:网格

Answer 1

您可以使用地图的index来检查它是否是第4次迭代。

return (
<Layout pageTitle='Projects'>
<GridIndex>
{data.allMdx.nodes.map((node, i) => (
<article key={node.id} className={i === 3 ? 'col-start-2' : ''}>
...

Answer 2

首先，你应该把data.allMdx.nodes保存在一个状态，我相信你已经知道

则当您想要与另一个元素交换时你可以这样做:

const swap=()=>{
const tmp=[...listState]
// here you do the changes to the tmp list
setState(tmp)
}
return (
<Layout pageTitle='Projects'>
<GridIndex>
{state.map((node) => (
<article key={node.id} className=''>
<Link to={`/projects/${node.slug}`}>
<div>{node.frontmatter.title}</div>
<GatsbyImage
image={getImage(node.frontmatter.imageCover)}
alt={node.frontmatter.imageCoverAlt}
className='h-auto xs:square'
/>
</Link>
</article>
))}
</GridIndex>
</Layout>
);