Блог

Главная - Вопросы по программированию - Показать состояние изображения внутри карты

Показать состояние изображения внутри карты

#javascript #arrays #reactjs

#язык JavaScript #массивы #реагирует на

Вопрос:

Я получаю массив с объектами из mongodb с react.js и создайте рейтинговый список с картой, отсортированной по рейтингу.

 {album amp;amp; album.map amp;amp; album.map((d) =gt;lt;Link className="link" to={{ pathname: "/itemPage/"   d.id, album: d}}gt;{d.isSingle? lt;ul className={"listNumber"}gt; lt;span className={"info"}gt;{i  }. {d.artist} - {d.title}lt;b className={"rating"}gt;{getRating(d)}lt;/bgt;lt;/spangt; lt;/ulgt; : ""}lt;/Linkgt;)}

это прекрасно работает, и мой список выглядит так с 4 объектами.

  1. Эминем — ххх 8.5
  2. Адель — ххх 7.0
  3. BMTH — xxx 6.3
  4. Eazy-E — xxx 3.0

Теперь я хотел бы включить условие, чтобы первые 3 рейтинга включали img. Я сохраняю img для каждого объекта, чтобы он был легко доступен с помощью

 lt;img src={d.imgSmall}/gt;

объект выглядит так.

 artist: "Eminem" id: "61a9474968f7d778e3ee73f4" imgSmall: "https://i.scdn.co/image/ab67616d00001e0255f592593d746c4fd1fa5ae9" isSingle: true rating: 8.5 reviews: (2) [{…}, {…}] title: "xxx"

Моя проблема в том, что я могу заставить работать только то, чтобы каждая запись включала img.

Комментарии:

1. попробуйте сделать это с помощью условного рендеринга {d.imgSmall ? lt;img src={d.imgSmall}/gt; : «}

2. это будет включать в себя img для каждой записи, потому что у каждого объекта есть imgSmall. Я уже пробовал это.

3. поскольку уже отсортированы, используйте индекс, {this.your_array.map((элемент, idx) =gt; { idx gt;lt; 3 ? lt;img src={d.imgSmall}/gt; : «}

4. Пожалуйста, сделайте код в песочнице @lorijames95

Метки: