可以在JSX中以相反的方式呈现组件吗？ [英] Possible to render components in reverse manner in JSX?

问题描述

在我的Nextjs/React.js组件中，我呈现的卡片列表如下：

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
    <div className="lg:col-span-8 col-span-1">
      {posts.map((post, index) => (
        <PostCard post={post.node} key={post.title} />
      ))}
    </div>

我想知道是否有可能以相反的方式呈现这些明信片；从最后一个索引而不是初始索引开始？这是我的博客应用程序，每当我发布新的明信片时，我希望最新的帖子呈现在列表的顶部，而不是列表的底部。

推荐答案

先反转数组：

{posts.slice(0).reverse().map((post, index) => (
    <PostCard
        post={ post.node } 
        key={ post.title } 
    />
))}

这篇关于可以在JSX中以相反的方式呈现组件吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！