Reactjs – Wie setze ich den Inline-Stil der Hintergrundfarbe?

Lesezeit: 2 Minuten

Herzog Dougal

Ich möchte die Stileigenschaften einiger Elemente festlegen, aber ich habe nicht die richtige Syntax. Kann jemand vorschlagen, wo ich falsch liege?

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

}

UPDATE: Für alle, die sich das ansehen, lesen Sie bitte die Kommentare. Dies ist kein funktionierender Code.

Funktioniert das auch? Ich würde mir vorstellen, dass Sie diese Anker in ein einziges Element packen müssten, da die Rückkehr ein Element sein soll, nicht viele – es sei denn, Sie haben etwas redigiert

– Dominik

25. Juni 2015 um 8:41 Uhr
Es funktioniert wahrscheinlich nicht. Ich habe es aus einem viel größeren Stück Code gehackt.

– Herzog Dougal

25. Juni 2015 um 21:51 Uhr
Dies ist die korrekte Syntax: <p style= {{color:'gray'}}>{props.item.text}</p>

– Julio Spinelli

17. August 2021 um 18:42 Uhr

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

Du brauchst die Anführungszeichen nicht.

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

Ich bekomme Uncaught ReferenceError: bgColors is not defined Fehler, wenn ich es in meiner Reaktionsansichtskomponente verwende. Übersehe ich etwas?

– RBT

20. April 2017 um 9:42 Uhr
Dieser Link leitet zu weiter facebook.github.io/react/docs/dom-elements.html. Außerdem mag ich diese Dokumentation zu React-Stil-Tags nicht, weil sie es Ihnen einfach sagt The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. Akzeptiert es alle CSS-Stile? Übergänge enthalten? Eine Liste der richtigen Eigenschaften des React-Stils wäre schön.

– AdamInTheOculus

25. April 2017 um 18:12 Uhr

Ihre Zitate sind an der falschen Stelle. Hier ist ein einfaches Beispiel:

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

Wenn Sie mehr als einen Stil wünschen, ist dies die richtige vollständige Antwort. Das ist div mit Klasse und Stil:

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

14307900cookie-checkReactjs – Wie setze ich den Inline-Stil der Hintergrundfarbe?

#Javascript #reagieren