React中如何按类别调用Sanity.io的指定图片？

问题根源 #

你当前仅将categoryData数组的第一个元素传给HomeGrid组件，导致所有图片位置都加载同一个分类的图片。要实现按类别调用指定图片，需要传递完整的分类数据数组，并在组件内根据分类名称匹配对应资源。

具体修改步骤 #

1. 更新index.js中的组件调用

将原来传递单个分类的代码，改为传递完整的categoryData数组：

// 替换原来的 <HomeGrid category={categoryData && categoryData[0]} />
<HomeGrid categories={categoryData} />

2. 重构HomeGrid组件

修改组件接收参数，添加分类匹配逻辑，并替换对应位置的图片：

import React from 'react';
import { urlFor } from '../lib/client';

const HomeGrid = ({ categories }) => {
  // 根据分类名称查找对应数据的工具函数
  const getCategory = (targetName) => {
    return categories?.find(category => category.name === targetName) || {};
  };

  // 匹配目标分类
  const melaminasCat = getCategory('Melaminas');
  const cubiertasCat = getCategory('Cubiertas');
  const herrajesCat = getCategory('Herrajes');
  const maderasCat = getCategory('Maderas');

  return (
    <div className="d-block w-75 mx-auto">
      <div className="row">
        {/* 左侧大区域：Melaminas */}
        <div className="col-sm">
          <div className="grid-container">
            {melaminasCat.image && (
              <img 
                src={urlFor(melaminasCat.image)} 
                alt={melaminasCat.name}
                className="d-block w-100" 
              />
            )}
          </div>
        </div>

        {/* 右侧区域 */}
        <div className="col-sm">
          {/* 右上大区域：Cubiertas */}
          <div className="row mb-3">
            <div className="grid-container">
              {cubiertasCat.image && (
                <img 
                  src={urlFor(cubiertasCat.image)} 
                  alt={cubiertasCat.name}
                  className="d-block w-100"
                />
              )}
            </div>
          </div>
          {/* 右下两个小区域：Herrajes & Maderas */}
          <div className="row">
            <div className="col-sm">
              <div className="grid-container-small">
                {herrajesCat.image ? (
                  <img 
                    src={urlFor(herrajesCat.image)} 
                    alt={herrajesCat.name}
                    className="d-block w-100"
                  />
                ) : (
                  <span>Herrajes</span>
                )}
              </div>
            </div>
            <div className="col-sm">
              <div className="grid-container-small">
                {maderasCat.image ? (
                  <img 
                    src={urlFor(maderasCat.image)} 
                    alt={maderasCat.name}
                    className="d-block w-100"
                  />
                ) : (
                  <span>Maderas</span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default HomeGrid

关键说明 #

• 确保Sanity Schema中分类的名称字段为name，如果实际字段是title或其他，需将category.name替换为对应字段名。
• 加入空值判断逻辑，避免因分类不存在或无图片导致的渲染错误。
• 工具函数getCategory复用了分类匹配逻辑，减少代码冗余。

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