Как я могу установить другой backgroundImage в элементе <div>в функции .map ()?

Question

Я хочу дать каждому CategoryCard div различный background-image.

Как я могу решить эту проблему со стилизованными компонентами? Я использую React и Typescript.

{this.MainChannels.map(item => {
  return (
    <CategoryCard key={item._id} onClick={() => this.handleChannel(item.name)}>
      {item.name}
    </CategoryCard>)
})}

URL-адреса изображений локально, это означает, что мои изображения хранятся на моем компьютере

Answer 1

Я решил это с импортом каждого изображения и встроенным стилем CategoryCard.

тогда я запихнул импорт в массив. И каждый элемент в функции .map () получает собственный фон через массив.