redux-form: brauche Hilfe beim Verständnis der Syntax

Question

Ich gehe durch das Video von redux-form. Ich fand den folgenden Code:

const renderInput = ({ input, meta, label}) => 
     <div> 
     <label>{label}</label> 
     <input {...input} /> 
     {meta.error && 
      <span> 
      {meta.error} 
      </span>} 
     </div> 

ich nicht das unten stehende Segment verstanden haben:

{meta.error && 
     <span> 
     {meta.error} 
     </span>} 

Können wir jsx innen {}? Hier wird <span> innerhalb von {} verwendet. Ich dachte nur Javascript Variablen oder Ausdrücke verwendet werden?

Answer 1

Ja, diese Syntax ist erlaubt.
Lassen Sie mich einige Teile der Dokumente zitieren ...

Embedding Ausdrücke in JSX

Sie können eine beliebige JavaScript-Ausdruck in JSX einbetten, indem sie in geschweiften Klammern wickeln.

Link

JSX ist ein Ausdruck zu

Nach dem Übersetzen JSX Ausdrücke regulären JavaScript-Objekte werden.

Link

Diese beiden Sätze ergänzen sich in Bezug auf andere, was innerhalb JSX erlaubt ist.

Da seine Ausgabe einfach JS ist, können Sie JS-Blöcke rekursiv in JSX-Elemente mit anderen JSX-Elementen einbetten und so weiter.
Es ist völlig in Ordnung.

Answer 2

Hinzufügen zu @ gustavohenke Antwort, das Codesegment

<div> 
    <label>{label}</label> 
    <input {...input} /> 
    {meta.error && 
     <span> 
     {meta.error} 
     </span>} 
    </div> 

wird verwendet, um ein Element <span> bedingt zu machen, den Inhalt enthält (möglicherweise Fehlermeldung) der meta.error, wenn meta.error gewissen Wert hat. Der Code verwendet short circuit evaluation, um dasselbe zu tun. Hoffe, Sie bekommen es jetzt!