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?
javascript
reactjs
Ben Roberts
quelle
quelle
The 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.
Antworten:
Es ist nur ein Objektliteral, das im Requisitenwert enthalten ist. Es ist das gleiche wie
quelle
dangerouslySetInnerHTML={__html: rawMarkup}
anstatt es zu machendangerouslySetInnerHTML={rawMarkup}
? Liegt es daran, dass das Objekt{__html: rawMarkup}
veränderlich ist und eine Zeichenfolge nicht?Curly Klammern haben hier 2 Verwendung: -
Sehen wir uns ein einfaches Beispiel an.
<Image source={pic} style={{width: 193}}/>
Wenn Sie beobachten,
pic
ist von Zahnspangen umgeben. Das ist die JSX-Methode zum Einbetten von Variablen.pic
kann 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} }
quelle
Falls Sie nicht wussten, warum
{{color: 'red'}}
imstyle
Tag verwendet wirdLaut der offiziellen Dokumentation von React akzeptiert das style-Attribut ein JavaScript-Objekt anstelle einer CSS-Zeichenfolge.
quelle
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
quelle
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
Für HTML-Elemente mit mehr Stileigenschaften tun Sie dies
dann rufen Sie es mit jsx-Syntax auf
quelle
Ich versuche es in einfachen Worten zu sagen, um für alle verständlich zu sein. Der folgende Code:
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
entspricht
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.
quelle
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.
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:
und
Genau wie in der Algebra steht beim Ersetzen Folgendes fest:
quelle