在反应 js 中，我如何将我的地图数据与每个图像的不同链接链接起来

Question

  {
      id: 1,
      name: 'Anna',
      image: one,
      price: '0.1ETH',
      href: "http://www.google.com/",
    },
    {
      id: 2,
      name: 'Unikorean',
      image: two,
        price: '0.2ETH',
        href: "http://www.gmail.com/",
    },
    {
      id: 3,
      name: 'Mullaah Jutt',
      image:three,
      price: '0.3ETH',
    },

JSON 数据。但我无法从这里获取链接。

 <div className='grid grid-cols-2 lg:grid-cols-5 gap-6 pt-4 py-8 '>
        {products.map((item, index) => (
          <div
            key={index}
            className='border-2 border-transparent bg-zinc-200 rounded-lg hover:scale-105 duration-300'
          >
          <a href='item.href'>{index[0]}
             <img
              src={item.image}
              alt={item.name}
           
              className='w-full h-[180px] object-cover rounded-t-lg'
            /> </a>
            <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>

产品显示代码，我使用映射来渲染我的数据，但无法获取链接，请帮助。

我只是给我的标签一个索引 ID，但它对我不起作用。 只想为每张图片提供不同的链接。

Answer 1

你只是在这里传递一个字符串：

href='item.href'

将此与你已经做了什么在其他地方，您观察到它正在“工作”：

src={item.image}

为什么要更改对字符串的方法，而不是像在其他地方那样直接引用属性？引用对象属性以使用其值：

href={item.href}