如何在 .map() 函数的 <div> 元素中设置不同的 backgroundImage？

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()函数中的每一项都通过数组得到自己的背景

如何在 .map() 函数的 <div> 元素中设置不同的 backgroundImage？

How can I set a different backgroundImage in <div> element in a .map() function?

css

styled-components

react-tsx