如何在map函数中使用JSX中的变量更改内联CSS样式?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (155)

我有一个map函数,它在数组中运行,并在DOM上为数组中的每一项(“colitem”)创建div。数组是颜色数组,数组中的每个项都是颜色的十六进制值(例如:#1a703f)

我试图更改每个div项的背景,以便它与数组中的项匹配。但是,我无法访问内嵌CSSJSX内的map函数中的变量。

{this.state.colorsArray.map(colorItem =>

      <div className="m-4">
        <div className="max-w-sm rounded overflow-hidden shadow-lg w-48">
          <div style={{ backgroundColor: {colorItem} }} className="h-32">
          </div>
          <div className="px-6 py-4">
            <p className="text-grey-darker">
              {colorItem}
            </p>
          </div>
        </div>
      </div>
提问于
用户回答回答于

如果你调用lambda中的参数“背景颜色”,则可以使用以下对象短记法:

{this.state.colorsArray.map(backgroundColor =>
  <div className="m-4">
    <div className="max-w-sm rounded overflow-hidden shadow-lg w-48">
      <div style={{ backgroundColor }} className="h-32">
      </div>
      <div className="px-6 py-4">
        <p className="text-grey-darker">
          {backgroundColor}
        </p>
      </div>
    </div>
  </div>
}
用户回答回答于

解决方法如下:

{this.state.colorsArray.map(colorItem => {
  let colorstyle = {
     backgroundColor: colorItem
  }
  return (
  <div className="m-4">
    <div className="max-w-sm rounded overflow-hidden shadow-lg w-48">
      <div style={colorstyle} className="h-32">
      </div>
      <div className="px-6 py-4">
        <p className="text-grey-darker">
          {colorItem}
        </p>
      </div>
    </div>
  </div>
})}

扫码关注云+社区

领取腾讯云代金券