redux-form：構文の理解に助けが必要

Question

私はredux-formのビデオを見ています。私は次のコードが見つかりました：

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

を私は以下のセグメントを理解していなかった。

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

は、我々は{}内JSX使用することはできますか？ここでは<span>が{}の内部で使用されています。私は、JavaScriptの変数や表現だけが使用されていると思った？

Answer 1

はい、この構文は許可されています。
はあなたが中括弧でそれをラップすることにより、JSXで任意のJavaScript式を埋め込むことができますJSXで

埋め込み式

...私はドキュメントのいくつかの部分を引用してみましょう。

Link

JSXは、コンパイル後、あまりにも

式で、JSX式は通常のJavaScriptオブジェクトになります。

Link

JSX内で許可されているものに関しては互いに完全にこれらの2つの文。

出力がJSなので、JSブロックを他のJSX要素とともにJSX要素に再帰的に埋め込むことができます。
これは完璧です。 @のgustavohenkeの回答、コードセグメント

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

に追加

Answer 2

はmeta.errorは、いくつかの値を有する場合、条件付きで、meta.error内容（おそらくエラーメッセージ）を含有<span>要素をレンダリングするために使用されます。コードでは、同じ処理を行うためにshort circuit evaluationが使用されています。あなたは今それを得ることを望む！