在JSX中是否可以反向渲染组件？如何让最新博文排在列表顶部

解决方案 #

你可以通过以下两种方式实现最新博文展示在列表顶部：

• 方案1：前端直接反转数组渲染
  直接在遍历数组前反转即可，注意要先拷贝原数组再反转，避免reverse()方法修改原始posts数据影响其他逻辑：

  <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
    <div className="lg:col-span-8 col-span-1">
      {/* slice()用于浅拷贝原数组，避免reverse修改原始posts数据 */}
      {posts.slice().reverse().map((post) => (
        <PostCard 
          post={post.node} 
          key={post.node.id /* 建议替换为博文唯一ID，不要用title避免重复冲突 */} 
        />
      ))}
    </div>
  </div>
  

• 方案2：数据源阶段倒序排序（更推荐）
  如果你的博文数据是从后端接口、CMS或者本地文件读取的，更建议在获取数据的环节就按发布时间倒序排序，不需要前端额外做数组处理，性能更优也不会出现多场景复用数据的顺序冲突。比如GraphQL查询时添加sort: publishedAt_DESC参数、REST接口请求时携带倒序排序参数、读取本地博文文件时按发布时间倒序排列都可以。

内容的提问来源于stack exchange，提问作者dev