从打字稿中作为道具提供的数组分配样式

Question

我正在尝试创建一个项目列表，该列表的颜色由提供给它的道具决定。颜色数组循环显示，我想根据数组中的颜色更改每个元素的颜色。我目前正在使用内联样式，但是打字稿给我这个错误 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

工作解决方案：

A1