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

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?

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

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.

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.

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

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>

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.

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'} }