Javascript 如何设置背景色的内联样式？

我想设置一些元素的样式属性，但语法不正确。有人能指出我错在哪里吗

import React from 'react';
import debug from 'debug'

const log = debug('app:component:Header');

var bgColors = { "Default": "#81b71a",
                    "Blue": "#00B1E1",
                    "Cyan": "#37BC9B",
                    "Green": "#8CC152",
                    "Red": "#E9573F",
                    "Yellow": "#F6BB42",
};

export default class SideBar extends React.Component {

  constructor(props) {
    super(props);

  }


  render() {

    return (


    <a style="{{backgroundColor: {bgColors.Default}}}" >default</a>
    <a style="{{backgroundColor: {bgColors.Blue}}}" >blue</a>
    <a style="{{backgroundColor: {bgColors.Cyan}}}" >cyan</a>
    <a style="{{backgroundColor: {bgColors.Green}}}" >green</a>
    <a style="{{backgroundColor: {bgColors.Red}}}"  >red</a>
    <a style="{{backgroundColor: {bgColors.Yellow}}}" >yellow</a>
           );
  }

}

从“React”导入React；
从“调试”导入调试
const log=debug（'app:component:Header'）；
var bgColors={“默认值”：“#81b71a”，
“蓝色”：“00B1E1”，
“青色”：“#37BC9B”，
“绿色”：“8CC152”，
“红色”：“#E9573F”，
“黄色”：“F6BB42”，
};
导出默认类边栏扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
违约
蓝色
青色
绿色
红色
黄色的
);
}
}

更新：如果有人看了这篇文章，请看评论，这不是有效的代码。

你不需要引用

<a style={{backgroundColor: bgColors.Yellow}}>yellow</a>

黄色

如果您想要多种样式，这是正确的完整答案。 这是具有类和样式的div：

<div className="class-example" style={{width: '300px', height: '150px'}}></div>

---

您的报价位置错误。下面是一个简单的例子：

<div style={{backgroundColor: "#FF0000"}}>red</div>

红色

这也可以吗？我认为你应该将这些锚包在一个元素中，因为返回应该是一个元素，而不是多个元素——除非你修改了一些东西，否则它可能不起作用。我从一段大得多的代码中截取了它。当我在react view组件中使用它时，我得到了

uncaughtReferenceError:bgColors没有定义。我遗漏了什么吗？链接重定向到。另外，我不喜欢这个关于React样式标记的文档，因为它只是告诉您
样式属性接受一个带有camelCased属性的JavaScript对象，而不是CSS字符串。它接受所有CSS样式吗？包括过渡？一个合适的React样式属性列表就好了。