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

【问题标题】：How can I set a different backgroundImage in <div> element in a .map() function?如何在 .map() 函数的 <div> 元素中设置不同的 backgroundImage？
【发布时间】：2020-05-24 07:38:42
【问题描述】：

我想给每个CategoryCard div 一个不同的background-image。

如何使用样式化组件解决这个问题？我使用 React 和 Typescript。

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

图片的网址是本地的，这意味着我的图片存储在我的电脑上

【问题讨论】：

我们可能需要更多信息来回答这个问题（图片 URL 来自哪里？），但总的来说，您是否尝试过在您的 CategoryCard 上仅使用 style 属性？

标签： css styled-components react-tsx

【解决方案1】：

我通过导入每个图像和 CategoryCard 的内联样式解决了这个问题。

然后我将导入推送到一个数组中。 .map() 函数中的每一项都通过数组获取自己的背景。

【讨论】：