css - 如何在中设置不同的背景图像.map() 函数中的元素？

Question

我想给每个CategoryCarddiv 一个不同的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() 函数中的每个项目都通过数组获取自己的背景。