Was ist der Zweck von doppelten geschweiften Klammern in der JSX-Syntax von React?

111

Im Tutorial von react.js sehen wir diese Verwendung von doppelten geschweiften Klammern:

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

Und dann im zweiten Tutorial "Denken in Reaktion" :

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

In der React JSX-Dokumentation werden jedoch keine doppelten geschweiften Klammern beschrieben oder erwähnt. Wofür ist diese Syntax (Double Curlies)? Und gibt es eine andere Möglichkeit, dasselbe in jsx auszudrücken, oder ist dies nur eine Auslassung aus der Dokumentation?

Ben Roberts
quelle
9
Aus der DokumentationThe exterior set of curly braces are letting JSX know you want a JS expression. The interior set of curly braces represent a JavaScript object, meaning you’re passing in a object to the style attribute.
Sayan

Antworten:

116

Es ist nur ein Objektliteral, das im Requisitenwert enthalten ist. Es ist das gleiche wie

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />
Felix Kling
quelle
@ BenAlpert Ich würde mich freuen, wenn ich einen Moment Zeit habe. Seltsamerweise genieße ich es tatsächlich, Dokumentationen zu bearbeiten (war Herausgeber einer juristischen Zeitschrift in einer früheren Inkarnation), und dort sind möglicherweise noch einige andere Verbesserungen zu verzeichnen. PS, lebst du noch in Boulder? Lass uns irgendwann Kaffee oder Mittagessen holen ... es wäre gut, jemanden mit der Insider-Information über React zu kennen, da wir gerade ein großes Projekt damit starten.
Ben Roberts
1
@ BenRoberts Großartig, danke! Leider bin ich in diesen Tagen in Kalifornien unterwegs, kann aber gerne im IRC-Raum #reactjs auf freenode vorbeischauen und würde gerne Fragen beantworten.
Sophie Alpert
@ BenAlpert Weißt du zufällig, was der Gedanke dahinter steckt, dangerouslySetInnerHTML={__html: rawMarkup}anstatt es zu machen dangerouslySetInnerHTML={rawMarkup}? Liegt es daran, dass das Objekt {__html: rawMarkup}veränderlich ist und eine Zeichenfolge nicht?
Brian Kung
55

Curly Klammern haben hier 2 Verwendung: -

  1. {..} wird zu einem Ausdruck in JSX ausgewertet.
  2. {key: value} impliziert ein Javascript-Objekt.

Sehen wir uns ein einfaches Beispiel an.

<Image source={pic} style={{width: 193}}/>

Wenn Sie beobachten, picist von Zahnspangen umgeben. Das ist die JSX-Methode zum Einbetten von Variablen. pickann ein beliebiger Javascript-Ausdruck / eine Variable / ein Objekt sein. Sie können auch so etwas wie {2 + 3} tun und es wird {5} ausgewertet.

Lassen Sie uns hier den Stil analysieren. {width: 193}ist ein Javascript-Objekt. Und um dieses Objekt in JSX einzubetten, benötigen Sie geschweifte Klammern.{ {width: 193} }

Hinweis: Um Javascript-Ausdrücke / -Variablen / -Objekte in JSX einzubetten, benötigen Sie geschweifte Klammern.

Mav55
quelle
5
Ich finde diese Antwort im Vergleich zu der als akzeptiert gekennzeichneten Antwort erklärender.
Rohit Mandiwal
@RohitMandiwal Vielen Dank, Sir. Ich weiß, dass es ein bisschen verwirrend ist, wenn Sie eine geschweifte Klammer in der anderen haben.
Mav55
14

Falls Sie nicht wussten, warum {{color: 'red'}}im styleTag verwendet wird

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

Laut der offiziellen Dokumentation von React akzeptiert das style-Attribut ein JavaScript-Objekt anstelle einer CSS-Zeichenfolge.

Andrew Lam
quelle
6

React verwendet JSX. In JSX muss jede Variable, jedes Statusobjekt, jeder Ausdruck usw. in {} eingeschlossen werden.

Während Inline-Stile in JSX angegeben werden, muss es als Objekt angegeben werden, damit es sich wieder in geschweiften Klammern befindet. {}.

Aus diesem Grund gibt es zwei Paar geschweifte Klammern

Sumer
quelle
3

Dies bedeutet, dass Sie anstelle einer Stilvariablen, die auf ein Objekt mit den beabsichtigten Stileigenschaften festgelegt ist, stattdessen nur die Stileigenschaften in einem Objekt festlegen können. Dies ist normalerweise eine bewährte Methode, wenn nur wenige Stile hinzugefügt werden sollen Ein Element, das mehr Stil benötigt. Es ist sauberer, eine Stilvariable zu deklarieren

Dies gilt beispielsweise für ein Element mit weniger Stileigenschaften

<span style={{color: 'red'}}>
  {this.props.product.name}
</span>

Für HTML-Elemente mit mehr Stileigenschaften tun Sie dies

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

dann rufen Sie es mit jsx-Syntax auf

<span style={spanStyle}>
  {this.props.product.name}
</span>
Ukuyoma theophilus
quelle
1

Ich versuche es in einfachen Worten zu sagen, um für alle verständlich zu sein. Der folgende Code:

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

entspricht

<span 
     dangerouslySetInnerHTML={ {__html: rawMarkup} } 
/>

Wir sollten also einfach den React-Ausdruck verwenden, wenn wir einer Eigenschaft ein Literalobjekt zuweisen möchten .

Für einige Leute, die hauptsächlich von AngularJs zu ReactJs wechseln, ist dies wahrscheinlich ein Teil der Verwechslung mit dem Ausdrucksbindungsoperator {{}} von AngularJs . Versuchen Sie also, es in ReactJs anders zu betrachten.

Ehsan
quelle
7
Ihre beiden Codefragmente scheinen bis auf die Formatierung genau gleich zu sein.
JCollum
4
@jcollum - das ist genau sein Punkt. Der Doppelklammer "Operator" ist kein Operator, was er gezeigt hat. Es ist nur so häufig in HTML-Template-Engines, dass es seltsam aussieht, wenn man reagiert.
aaaaaa
Ich verstehe es immer noch nicht
Andrew Lam
@ AndrewLam - Einfach bearbeitet. Kannst du es jetzt verstehen?
Ehsan
1

Meine Interpretation der doppelten geschweiften Klammern ist, dass das Stilobjekt nur ein JavaScript-Objekt akzeptiert, sodass sich das Objekt in einzelnen geschweiften Klammern befinden muss.

style={jsObj}

Das Objekt für Stilartefakte besteht aus Schlüssel-Wert-Paaren (Wörterbuch gegenüber einem Array), und dieses Objekt wird beispielsweise als ausgedrückt {color:'#ffffff'} .

Sie haben also:

style = { jsObj }

und

jsObj = {color:'#ffffff'}

Genau wie in der Algebra steht beim Ersetzen Folgendes fest:

style = { {color:'#ffffff'} }
dpresbit
quelle