reactjs - arka plan renginin satır içi stili nasıl ayarlanır?

Bazı öğelerin stil özelliklerini ayarlamak istiyorum ancak sözdizimi doğru değil. Nerede yanlış olduğumu öneren var mı?reactjs - arka plan renginin satır içi stili nasıl ayarlanır?

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

}

GÜNCELLEME: buna bakanlar için lütfen bu çalışma kodu değil yorumlara bakın.

kaynak

2015-06-25 Duke Dougal

Ayrıca bu işe yarar mı? Bu çapayı tek bir elemana sarmak zorunda kalacağım, dönüşün tek bir öğe olması gerektiğinden, pek fazla değil - –

bir şeyi redakte etmedikçe Muhtemelen işe yaramıyor. Çok daha büyük bir kod parçasından aşağı hackledim. –

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

Sen tırnak içine alınması gerekmez.

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

kaynak

2015-06-25 07:24:15

Reaksiyon görünümü bileşenimde kullandığımda 'Uncaught ReferenceError: bgColors tanımlı değil 'hatası alıyorum. Bir şey mi eksik? – RBT

Bu bağlantı, https://facebook.github.io/react/docs/dom-elements.html adresine yönlendirir. Ayrıca, React stil etiketlerinde bu belgeyi beğenmedim çünkü size basit bir şekilde 'style niteliğinin bir CSS dizgisi yerine camelCased özellikleriyle bir JavaScript nesnesi kabul ettiğini' söylüyor. Tüm CSS stillerini kabul ediyor mu? Geçişler dahil mi? Uygun React stili özelliklerinin bir listesi iyi olurdu. – PantsMagee

Başka bir seçenek olacaktır:

var textDecoration = 'line-through'; 

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

kaynak

2017-01-31 11:58:32

bu doğru tam cevap daha bir tarzda daha istiyorum.

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

kaynak

2017-03-31 12:40:38 llioor

Sizin tırnak yanlış yerde şunlardır: Bu sınıf ve stil ile div olduğunu. İşte bu basit bir örnektir:

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

kaynak

2017-06-06 08:29:23 Craigo

reactjs - arka plan renginin satır içi stili nasıl ayarlanır?

cevap

İlgili konular