redux-formの一部のコードを理解できません

Question

私はredux-formドキュメントのいくつかのコード例を使用していますが、私はrenderField関数で理解できないコードをいくつか持っています。

const renderField = ({ input, label, type, meta: { touched, error } }) => { 
    return (
    <div> 
     <label>{label}</label> 
     <div> 
     <input className="form-control" {...input} type={type}/> 
     {touched && error && <span>{error}</span>} 
     </div> 
    </div> 
) 

触れた場合、私は

{touched && error && <span>{error}</span>}

以下のコードを理解していないが真である...と何？私はあなたがif elseとternary演算子を使用して上記のコードを壊した場合、それは次のようになります

Answer 1

これは本当にリアクションとは関係ありません。これは、javascriptによる表現の評価方法です。ここで

は、それがfalseに変換できる場合relevant docs

expr1 && expr2 

戻り値は式expr1です。それ以外の場合は、 expr2を返します。したがって、ブール値で使用された場合、& &は、両方とも オペランドがtrueの場合はtrueを返します。それ以外の場合はfalseを返します。

式はブール値ではなく、（例えばnull又はundefinedように）偽に変換できないので、それは

におけるエラーこの場合span最後の値を返し、 Mayankが答えているように、JSXは表現を許すだけです。 ifは、式ではなく文であると見なされるため、JSXでは使用できません。だからあなたはjavascriptの他の機能を使って反応開発者がそのコントロールを取り戻すのを見るでしょう。

Answer 2

...結果を知っているが、プロセスを知らない：

1. if(touched && error) 
     <span>{error}</span> 

2. if(touched) 
     if(error) 
     <span>{error}</span> 

3. {touched && error ? <span>{error}</span> : null} 

それは単にtouched and error both are true then only render this spanかのことを意味します。

注：：ifは、JSXで使用することはできません。明確な画像を作成するために使用しました。 ifを使用する場合は、レンダリングメソッドから関数を呼び出し、その内部で1と2の方法でスパンを返すことができます。