Как изменить встроенные стили CSS, используя переменную в JSX внутри функции карты?

Question

Хорошо, у меня есть функция map, которая запускается через массив и создает div в DOM для каждого элемента ("colorItem") в массиве.Массив является массивом цветов, каждый элемент в массиве является шестнадцатеричным значением цвета (пример: #1a703f).

Я пытаюсь изменить фон каждого элемента div, чтобы он соответствовалэлемент из массива.Однако, поскольку я не могу получить доступ к переменной внутри функции карты внутри встроенного CSS JSX.

{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

Если вы вызываете параметр в лямбде '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>
}

Answer 2

Что-то вроде этого может работать для вас:

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