React/ES6中如何有序展示图片：首图用CardMedia其余用img？

问题描述 #

我有一个图片数组，需要按order字段升序排列。排序后第一张图片使用<CardMedia/>组件展示，剩余图片用<img>标签展示，求最新版本JavaScript实现该需求的最优方式。

现有代码 #

export default function BasicCard() {
  const orderImages = images.sort(function (a, b) {
    return a.order - b.order;
  });

  return (
    <Card>
      <Stack spacing={1}>
        <CardMedia
          component="img"
          image={orderImages?.[0]?.url}
          sx={{
            maxHeight: { xs: 100, sm: 100 },
            objectFit: "cover"
          }}
        />
        <Grid container spacing={0.5}>
          {orderImages?.map((image) => (
            <Grid key={image.order} item xs={4}>
              <img src={image.url} width="100%" />
            </Grid>
          ))}
        </Grid>
      </Stack>
    </Card>
  );
}

预期输出 #

【Card Media】对应数据 #

{
  order: 0,
  url: "https://source.unsplash.com/user/c_v_r/1900x800"
}

【Img src】对应数据 #

{
  order: 1,
  url: "https://html.com/wp-content/uploads/flamingo.jpg"
},
{
  order: 5,
  url: "https://res.cloudinary.com/demo/image/upload/if_ar_gt_3:4_and_w_gt_300_and_h_gt_200,c_crop,w_300,h_200/sample.jpg"
}

最优实现方案 #

核心优化点 #

1. 避免原地修改原数组：Array.sort()是原地排序方法，会直接修改原数组，应先复制数组再排序，保证数据不可变性。
2. 解构分离首图与剩余图片：使用数组解构语法直接拆分首图和剩余图片，代码更简洁直观，避免遍历全数组时做索引判断。

修改后的完整代码 #

export default function BasicCard() {
  // 复制数组后排序，避免修改原images数组
  const sortedImages = [...images].sort((a, b) => a.order - b.order);
  // 解构出第一张图片和剩余图片
  const [firstImage, ...restImages] = sortedImages;

  return (
    <Card>
      <Stack spacing={1}>
        {/* 渲染首图：处理数组为空的边界情况 */}
        {firstImage && (
          <CardMedia
            component="img"
            image={firstImage.url}
            sx={{
              maxHeight: { xs: 100, sm: 100 },
              objectFit: "cover"
            }}
          />
        )}
        {/* 渲染剩余图片 */}
        <Grid container spacing={0.5}>
          {restImages.map((image) => (
            <Grid key={image.order} item xs={4}>
              <img src={image.url} width="100%" />
            </Grid>
          ))}
        </Grid>
      </Stack>
    </Card>
  );
}

代码说明 #

• 使用扩展运算符[...images]创建原数组的浅拷贝，再调用sort排序，避免污染原数据。
• 数组解构const [firstImage, ...restImages] = sortedImages直接分离首图和剩余图片，后续渲染逻辑无需额外判断索引。
• 添加firstImage &&判断，处理数组为空时的边界情况，避免渲染空的CardMedia组件。

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