可以在 JSX 中以相反的方式呈现组件吗？

Posted 2023-02-22

【中文标题】可以在 JSX 中以相反的方式呈现组件吗？

【英文标题】：Possible to render components in reverse manner in JSX?

【发布时间】：2022-01-08 12:14:06

【问题描述】：

在我的 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>

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

【参考方案1】：

只需先反转数组：

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

【参考方案2】：

每当我发布新的明信片时，我都希望将最新的帖子呈现在列表顶部而不是列表底部。

如果您当前通过添加到数组的末尾来执行此操作，则可以改为添加到数组的开头。例如，如果你这样做：

setPosts(prev => [...prev,  title: 'My New Post' ]);

改为这样做：

setPosts(prev => [ title : 'My New Post' , ...prev]);

如果您无法更改数组的创建方式（例如，因为某些组件希望它以一种顺序排列，而另一些则需要另一种顺序），那么您可以按正确的顺序创建一个新数组，然后映射该数组.如果数组不会经常更改，您可能需要记住这一点：

const reorderedPosts = useMemo(() => 
  return [...posts].reverse();
, [posts]);

// ...
reorderedPosts.map((post, index) => (
  <PostCard post=post.node key=post.title />
))

这也可以很容易地增强，让您可以通过状态更改订单，如果您需要：

const [shouldReverse, setShouldReverse] = useState(false);
const reorderedPosts = useMemo(() => 
  if (shouldReverse) 
    return [...posts].reverse();
   else 
    return posts;
  
, [posts, shouldReverse])

// ...
reorderedPosts.map((post, index) => (
  <PostCard post=post.node key=post.title />
))