Was bedeuten geschweifte Klammern in JSX (React)?

Question

Ein Beispiel einen Stil festgelegt in reagieren Sie

var css = {color: red}

und in der zweiten Code-Schnipsel

<h1 style={css}>Hello world</h1>

Warum brauchen Sie die geschweiften Klammern um CSS tun könnte?

Answer 1

Sie setzen geschweifte Klammern, wenn Sie den Wert einer Variablen innerhalb von "html" (also innerhalb des Renderteils) verwenden möchten. Es ist nur eine Möglichkeit, der App zu sagen, dass sie den Wert der Variablen annehmen und sie dort ablegen soll, im Gegensatz zu einem Wort.

Answer 2

Die geschweiften Klammern sind eine spezielle Syntax, um dem JSX-Parser mitzuteilen, dass er den Inhalt zwischen ihnen als JavaScript anstelle einer Zeichenfolge interpretieren muss.

Sie benötigen sie, wenn Sie einen JavaScript-Ausdruck wie eine Variable oder eine Referenz in JSX verwenden möchten. Denn wenn Sie die Standard-Anführungszeichen Syntax wie so verwenden:

var css = { color: red }

<h1 style="css">Hello world</h1>

JSX weiß nicht, die Variable css im Stil-Attribut verwenden soll anstelle der Zeichenfolge. Und indem Sie die geschweiften Klammern um die Variable css legen, sagen Sie dem Parser "nehmen Sie den Inhalt der Variablen css und legen Sie sie hier". (Technisch seine Bewertung des Inhalts)

Dieser Prozess wird im Allgemeinen als "Interpolation" bezeichnet.

Answer 3

Wenn Sie nicht die Variable css verwenden, könnte die JSX so aussehen:

<h1 style={ {color: 'red'} }>Hello world</h1>

Ich denke, Sie sind verwirrt über die doppelte geschweifte Klammern.

so wissen Sie, dass die geschweiften Klammern in JSX processing in a JavaScript way bedeutet, so dass die äußeren Klammern genau für diesen Zweck verwendet wird.

Aber die style Eigenschaft akzeptiert eine object. Und ein Objekt braucht noch ein Paar geschweifte Klammern, um es zu umhüllen. Das ist der Zweck für die inneren.