react dangerouslysetinnerhtml color change javascript reactjs

javascript - dangerouslysetinnerhtml - react js background image



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

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.


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>


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

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