reactjs - как установить встроенный стиль фона?

Я хочу установить свойства стиля для некоторых элементов, но у меня нет правильного синтаксиса. Может ли кто-нибудь предложить, где я ошибаюсь?reactjs - как установить встроенный стиль фона?

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

}

ОБНОВЛЕНИЕ: для всех, кто смотрит на это, см. Комментарии, это не работает код.

источник

2015-06-25 Duke Dougal

Также это работает? Я бы подумал, что вам придется обернуть эти привязки в одном элементе, поскольку возврат должен быть одним элементом, а не многими - если вы ничего не отредактировали –

Возможно, это не сработает. Я взломал его из гораздо более крупного кода. –

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

Вам не нужны кавычки.

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

источник

2015-06-25 07:24:15

Я получаю сообщение 'Uncaught ReferenceError: bgColors is not defined', когда я использую его в своем компоненте просмотра реакции. Я что-то упускаю? – RBT

Эта ссылка перенаправляется на https://facebook.github.io/react/docs/dom-elements.html. Кроме того, мне не нравится эта документация по тегам стиля React, потому что она просто говорит вам: «Атрибут style принимает объект JavaScript с свойствами camelCased, а не с строкой CSS». Принимает ли он все стили CSS? Включены переходы? Список правильных свойств стиля React был бы приятным. – PantsMagee

Другой вариант:

var textDecoration = 'line-through'; 

<li style={ {textDecoration} } > </li>

источник

2017-01-31 11:58:32

Если вы хотите больше, чем один стиль, это правильный полный ответ. Это DIV с классом и стилем:

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

источник

2017-03-31 12:40:38 llioor

Ваши котировки находятся в неправильном месте. Вот простой пример:

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

источник

2017-06-06 08:29:23 Craigo

reactjs - как установить встроенный стиль фона?

ответ

Смежные вопросы