Question

好的，所以我有一个map函数，它通过一个数组运行，并在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>

`

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

Answer 2

如果你在lambda＆＃39; backgroundColor＆＃39;中调用参数，你可以使用这个对象短符号：

{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>
}

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

2 个答案: