Question

您好，当图像在JSON数据中可用时，我想用Array.map实现图像，请在下面查找JSON ...

var data = [
  {
    categorytitle: "Shoes",
    category: [
      {
        Category1: "Boots"
      },
      {
        Category2: "Sneakers"
      },
      {
        Category3: "Flats"
      },
      {
        Category4: "Booties"
      },
      {
        Category5: "Mules"
      },
      {
        Category6: "Heels/Pumps"
      },
      {
        Category7: "Clogs"
      },
      {
        Category8: "Slippers"
      },
      {
        Category9: "Sandals"
      },
      {
        Category10: "Sale"
      },
      {
        Category11: "Shop All"
      }
    ]
  },
  {
    categorytitle: "Activities",
    category: [
      {
        Category1: "Comfort Shop"
      },
      {
        Category2: "Run Shop"
      },
      {
        Category3: "Trend Guide"
      },
      {
        Category4: "Athletic"
      },
      {
        Category5: "Casual"
      },
      {
        Category6: "Dress"
      },
      {
        Category7: "Outdoor"
      },
      {
        Category8: "Walking"
      },
      {
        Category9: "Foot Health & Wellness"
      },
      {
        Category10: "Narrow Shoes"
      },
      {
        Category11: "Wide Shoes"
      }
    ]
  },
  {
    categorytitle: "Clothing & More",
    category: [
      {
        Category1: "Handbags/Purses"
      },
      {
        Category2: "Active & Yoga"
      },
      {
        Category3: "Coats & Jackets"
      },
      {
        Category4: "Athletic"
      },
      {
        Category5: "Dresses"
      },
      {
        Category6: "Tops"
      },
      {
        Category7: "Sweaters"
      },
      {
        Category8: "Socks"
      },
      {
        Category9: "Sunglasses"
      },
      {
        Category10: "Rain Gear"
      },
      {
        Category11: "Wide Shoes"
      }
    ]
  },
  {
    categorytitle: "Top Brands",
    category: [
      {
        Category1: "Sam Edelman"
      },
      {
        Category2: "Clarks"
      },
      {
        Category3: "Dr Martens"
      },
      {
        Category4: "Lucky Brand"
      },
      {
        Category5: "New Balance"
      },
      {
        Category6: "Skechers"
      },
      {
        Category7: "Sperry Top-Sider"
      },
      {
        Category8: "Sorel"
      },
      {
        Category9: "TOMS"
      },
      {
        Category10: "UGG"
      },
      {
        Category11: "Vionic"
      }
    ]
  },
  {
    imagePath:
      "src/images/image1.png",
    targetUrl: "/",
    title: "HEAD TURNING TREND BOOTS"
  }
];

也请在下面找到显示UI（用户界面）的代码...


{data.map((ele, index) => (
                    <div key={"Key-" + index}>
                      <h3>{ele.categorytitle}</h3>
                      <ul>
                        {Array.isArray(ele.category) &&
                          ele.category.map((d, i) => (
                            <li key={"Key-" + i}>{d[`Category${i + 1}`]}</li>
                          ))}
                      </ul>
                    </div>
                  ))}

请指导我，当图像可用时，我们如何显示图像，否则无需显示图像。在此先感谢！

Answer 1

您可以在地图内添加如下图像：

{data.map((ele, index) => (
   <div key={"Key-" + index}>
     // ... other elements
     {ele.imagePath && (
      <img src={ele.imagePath} />
     )}
   </div>
 ))}

Answer 2

我编辑了您的代码，您可以添加条件ele.imagePath

{data.map((ele, index) => (
                        <div key={"Key-" + index}>
                          <h3>{ele.imagePath ? ele.title : ele.categorytitle}</h3>
                          <ul>
                            {Array.isArray(ele.category) &&
                              ele.category.map((d, i) => (
                                {ele.imagePath ?
                                    <img src={ele.imagePath} />
                                     :
                                     <li key={"Key-" + i}>{d[`Category${i + 1}`]}</li>

                                }
                              ))}
                          </ul>
                        </div>
                      ))}

当图像将在Json数据中时在Array.map中显示图像

2 个答案: