javascript - dangerouslysetinnerhtml - react js background image

reactjs-¿Cómo configurar el estilo en línea de backgroundcolor?

Question

Quiero establecer las propiedades de estilo de algunos elementos pero no tengo la sintaxis correcta. ¿Alguien puede sugerir dónde estoy equivocado?

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

ACTUALIZACIÓN: para cualquier persona que vea esto, consulte los comentarios, este no es un código de trabajo.

Answer 1

Si quieres más de un estilo, esta es la respuesta completa correcta. Esto es div con clase y estilo:

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

Answer 2

Sus citas están en el lugar equivocado. Aquí hay un ejemplo simple:

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

Answer 3

https://facebook.github.io/react/tips/inline-styles.html

No necesitas las citas.

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