如何在地图函数中使用 JSX 中的变量更改内联 CSS 样式？

Posted 2023-02-22

【中文标题】如何在地图函数中使用 JSX 中的变量更改内联 CSS 样式？

【英文标题】：How do I change inline CSS styles using a variable in JSX inside a map function?

【发布时间】：2018-11-22 10:01:29

【问题描述】：

好的，所以我有一个映射函数，它通过一个数组运行，并在 DOM 上为数组中的每个项目（“colorItem”）创建 div。该数组是一个颜色数组，数组中的每一项都是颜色的十六进制值（例如：#1a703f）。

我正在尝试更改每个 div 项的背景，使其与数组中的项匹配。但是因为我无法访问内联 CSS JSX 内的 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>

`

【问题讨论】：

试试style= backgroundColor: colorItem

@ChrisG 哇，我想我肯定试过了，但它奏效了 - 谢谢！

一旦你进入了 大括号的第一/外部集合，你又回到了javascript 上下文中，其中... 意味着创建一个对象字面量。

【参考方案1】：

这样的事情可能对你有用：

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>
)

【参考方案2】：

如果你在 lambda 'backgroundColor' 中调用参数，你可以使用这个对象简写法：

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>