如何为嵌套数组元素指定一个类？

Question

我有一个 JSON，存储在一个名为PhotographersInfo的变量中，我从那里获取数据，但我想要做的是：我想显示与每个摄影师对应的标签，并 为每个摄影师提供一个边框！就像这张照片一样结果 - 照片我使用模板文字来显示 HTML 中的信息，目前我正在使用 join() 方法将元素转换为字符串，但如何为每个 TAG 提供边框？这是我的代码：photographersInfo.forEach((item) => {   const photographersDiv = document.getElementById('container');  const div = document.createElement("div");  photographersDiv.appendChild(div);  div.innerHTML = `    <div class="photographerContainer">        <div class="portraitBox">          <img src="${item.portrait}" alt="photo">        </div>        <h1 class="name">${item.name}</h1>        <p class="city">${item.city}, ${item.country}</p>        <p class="tagline">${item.tagline}</p>        <p class="price">${item.price}€/jour</p>        <p class="tags">${item.tags.join(" ")}</p>      </div>    `   });这是我的 JSON 数据：let photographersInfo = [      {        "name": "Mimi Keel",        "id": 243,        "city": "London",        "country": "UK",        "tags": ["#portrait", "#events", "#travel", "#animals"],        "tagline": "Voir le beau dans le quotidien",        "price": 400,        "portrait": "/Photos/Portrait/MimiKeel.jpg"      },      {        "name": "Ellie-Rose Wilkens",        "id": 930,        "city": "Paris",        "country": "France",        "tags": ["#sports", "#architecture"],        "tagline": "Capturer des compositions complexes",        "price": 250,        "portrait": "/Photos/Portrait/EllieRoseWilkens.jpg"      },      {        "name": "Tracy Galindo",        "id": 82,        "city": "Montreal",        "country": "Canada",        "tags": ["#art", "#fashion", "#events"],        "tagline": "Photographe freelance",        "price": 500,        "portrait": "/Photos/Portrait/TracyGalindo.jpg"      },      {        "name": "Nabeel Bradford",        "id": 527,        "city": "Mexico City",        "country": "Mexico",        "tags": ["#travel", "#portrait"],        "tagline": "Toujours aller de l'avant",        "price": 350,        "portrait": "/Photos/Portrait/NabeelBrandford.jpg"      },

Answer 1

使用地图：

${item.tags.map(d => `<span class="tag">${d}</span>`).join(" ")}

其中 css 可能类似于：

.tag {

    border: 1px solid lightgray;

    border-radius: 20px; 

    padding: 5px;

}