Inline-Stil funktioniert nicht ReactJS

Ich versuche React zu lernen. Warum können Sie innerhalb einer Komponente innerhalb einer Komponente keinen Stil verwenden?Inline-Stil funktioniert nicht ReactJS

Der Fehler:

The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Home .

<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);">

ich auch dies auch versucht haben:

<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}>

oder

<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}>

Jede Hilfe mit dieser Syntax würde sehr geschätzt werden. Andere Leute haben geschrieben, dass sie den Stil ändern, um Stile zu sagen, aber das scheint auch nicht zu funktionieren.

Quelle

2017-05-22 David Brierton

Von DOC:

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.

Also statt background-image Verwendung backgroundImage.

Zum Beispiel:

padding-top  --->  paddingTop 

padding-left  --->  paddingLeft 

margin-right  --->  marginRight 

...

How to specify the inline style?

Wir brauchen ein Objekt zu Stil-Attribut übergeben, die die Werte alle in Form von Schlüssel-Wert-Paar enthält.

So:

<div 
    style={{ 
     backgroundImage: 'url(../images/WinterCalling_2016.jpg)', 
     marginTop: 20}} 
>

Update:

Wir können template literals verwenden eine Variable innerhalb URL zu übergeben, wie diese:

<div style={{backgroundImage: `url(${image1})`}}>

Quelle

2017-05-22 02:47:52

Reagieren Sie nach der Camelcase-Konvention, so müssen Sie stattdessen background-image zu backgroundImage ändern.

Weitere Informationen finden Sie in der Dokumentation here.

Quelle

2017-05-22 02:35:04

'url' akzeptiert eine Zeichenfolge, also glaube ich nicht, dass das funktionieren würde. Sie können stattdessen String-Vorlagen verwenden, wie die in diesem Beitrag: http://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles –

-1

Haben Sie versucht, background-image in Anführungszeichen zu verpacken?

<div className="single_slide" style={{'background-image': 'url(../images/WinterCalling_2016.jpg)'}}></div>

Das ist für mich scheint zu funktionieren (zumindest, wenn sie mit der Hintergrundfarbe Eigenschaft zu testen; ich kein Bild zur Hand haben, mit für Hintergrund-Bild zu testen)

Quelle

2017-05-22 02:38:33

Wenn Sie die style-Eigenschaft verwenden möchten, stellen Sie ein JavaScript-Wörterbuchobjekt bereit. Der Stilschlüssel für background-image ist jedoch backgroundImage.

<div 
    className="single_slide" 
    style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}} 
>

Quelle

2017-05-22 02:39:57

@DavidBrierton Ja, das können Sie tun. Je nachdem, welchen Webpack-Ressourcenlader Sie verwenden, erhalten Sie möglicherweise eine URL von base64-Daten oder eine statische Datei-URL. –

@DavidBrerton und Sie müssen das Vorlagenliteral verwenden, wie Mayank Shuklas Antwort zeigt. –

-1

oder können Sie ‚wichtig 'mit diesem .... wie "Hintergrundfarbe: rot! wichtig" Hinweis: Und rufen Sie Ihre js in Fußzeile. Weil manchmal js reagiert Zuerst, wenn wir das in header.so nennen, rufen Sie Ihre 'js' in Fußzeile auf.

<div class="yourclass" style="background-color:red;" >your div</div>

style = "Hintergrundfarbe: rot;"

Quelle

2017-09-07 04:32:24 webtrackstudio

Es ist nicht schön präsentiert, was Sie sagen wollen. Und außerdem habe ich den Eindruck, dass dieser Frage kein neuer Inhalt hinzugefügt wird. –

Inline-Stil funktioniert nicht ReactJS

Antwort

Verwandte Themen