React.js中如何为map渲染的图片绑定对应跳转链接

核心问题分析 #

你代码里的<a href='item.href'>是把字符串'item.href'当作链接地址，而非读取item对象里的href属性值，这是导致无法获取正确链接的根本原因。另外还有两个可以优化的点：用index作为key不够规范，以及部分产品没有href属性的情况需要处理。

具体修复步骤 #

1. 修正href取值方式
   将href='item.href'改为href={item.href}，用大括号包裹变量才能正确读取React中的props值。

2. 处理无href的产品
   第三个产品没有href属性，直接渲染<a>标签会导致点击跳转到无效地址，可以通过条件判断，仅当item存在href时才渲染链接标签，否则只显示图片。

3. 优化key值
   避免使用index作为列表项的key，改用每个产品唯一的id属性，提升React渲染效率和稳定性。

修正后的完整代码 #

<div className='grid grid-cols-2 lg:grid-cols-5 gap-6 pt-4 py-8 '>
  {products.map((item) => (
    <div
      key={item.id}
      className='border-2 border-transparent bg-zinc-200 rounded-lg hover:scale-105 duration-300'
    >
      {/* 条件渲染链接或纯图片 */}
      {item.href ? (
        <a href={item.href}>
          <img
            src={item.image}
            alt={item.name}
            className='w-full h-[180px] object-cover rounded-t-lg'
          />
        </a>
      ) : (
        <img
          src={item.image}
          alt={item.name}
          className='w-full h-[180px] object-cover rounded-t-lg'
        />
      )}
      <div className='flex justify-between px-2 py-4 '>
        <p className='font-bold text-black'>{item.name}</p>
        <p>
          <span className='bg-black text-zinc-200 p-1 rounded-full'>
            {item.price}
          </span>
        </p>
      </div>
    </div>
  ))}
</div>

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