从在 typescript 中作为 prop 提供的数组分配样式

Question

我正在尝试创建一个项目列表，其颜色由提供给它的道具决定。颜色数组循环通过，我想根据数组中的颜色更改每个元素的颜色。我目前正在使用内联样式，但typescript给我这个错误Type 'string' is not assignable to type '{ [key: string]: string; }'.

这是我目前编写的代码：

<div>

  <div>

    {this.colors.map(color => {

      return (

        <div id={color} class="colorCircle" style={`background-color: ${color}`}>

          test

        </div>

      );

    })}

  </div>

</div>

Answer 1

工作解决方案：style={{ "background-color": color }}