リアクションのブール値の要素：ifとIfElse

Question

反応への移行私は、醜いブール論理がjsx内でどのようにあるかに驚いています。私は次の3つのコンポーネントを使い始めました。

どうしたのですか？彼らに何も問題がなければ、なぜ反応に組み込まれていないのでしょうか、誰もが使っている既存の図書館によって提供されていませんか？

コンポーネント：

// Simple "if" logic 
export const If = ({v, children}) => (v ? children : <div/>) 

// "if", "else" logic 
export const IfElse = ({v, children}) => { 
    if (children.length !== 2) { 
    return <div style={{color: 'red'}}>{`IfElse should receive 2 children, not ${children.length}`}</div> 
    } else if (v) { 
    return children[0] 
    } else { 
    return children[1] 
    } 
} 

// "if", "elseif", ["elseif"...], "else" logic 
export const Switch = ({children}) => { 
    // All but the last child of a Switch component must be "If" components 
    for (let c of children.slice(0, children.length - 1)) { 
    if (c.props.v) { 
     return c.props.children 
    } 
    } 
    return children[children.length - 1] 
} 

使用法：

const UsageExample = ({foo}) => (
    <div> 
    <If v={foo}> 
     foo is truey 
    </If> 
    {/* is equivalent to */} 
    {foo && 'foo is true'} 

    <IfElse v={foo === 'bar'}> 
     <span>foo is equal to 'bar'</span> 
     <span>foo doesnt equal 'bar'</span> 
    </IfElse> 
    {/* is equivalent to */} 
    {foo === 'bar' ? 
     <span>foo is equal to 'bar'</span> : 
     <span>foo doesnt equal 'bar'</span> 
    } 

    <Switch> 
     <If v={foo === 'foo'}> 
     foo equals 'foo' 
     </If> 
     <If v={foo === 'bar'}> 
     else if foo equals 'bar' 
     </If> 
     <span> 
     else foo is not 'foo' or 'bar' 
     </span> 
    </Switch> 
    {/* no simple equivalent in vanilla jsx AFAIK */} 
    </div> 
) 

あなたは、これらのコンポーネントは、あまり明確とインライン構文未満正規のですが、私のために、彼らははるかに容易だと主張することがあり読む。特に、内側の構成要素が大きい場合。

私の初期の仮定は、これらのコンポーネントによって、まだ表示されていない子がレンダリングされ、結果が破棄されるということでしたが、確認しましたが、これは起こりません。

彼らはあまりにも真実であるように見えます。

{ myBoolExp && <MyComponent> } 

または

{ myBoolExp ? <Mycomponent /> : <MyOtherComponent /> } 

私はこれは、このように、プレーンJavaScriptをである事実によるものであると仮定し、それがあまり必要としますJSXで

Answer 1

は直接JSXで& &オペレータまたは三元を使用するのが一般的です学ぶべき慣習。

Answer 2

これはあなた次第です。個人的にはIfとIfElseですが、私はJSXのやり方がうまくいくと思います。彼らはほとんどのプログラマーが従う一般的な表現であるため、読みにくく理解できます。これらのカスタムコンポーネントを作成すると、コードを読んでいる人が最初にそれらを理解し、同じ量のスペースで組み込みのJSXテクニックを使用して実際にできることを実行するだけで済むことを意味します。

コンポーネントが大きい場合、解消するか簡略化することをお勧めします。を追加しないでください。カスタムコンポーネントで行間を節約したり、個人的にわかりやすい、 あなたの選択）。

コメントが言っているように、何らかの条件付きレンダリングを行う場合は、すべてをインライン展開するのではなく、JSXの外側で計算する方がよいでしょう。論理の束をインライン展開すると、JSXを読み込み、拡張するのが難しくなります。

、理解しやすさの点では、あなたの例では、あなたは、便利なコンポーネントが何をするかを説明するのに役立ちます素敵な成分の含有量を使用し、例えば：

<IfElse v={foo === 'bar'}> 
    <span>foo is equal to 'bar'</span> 
    <span>foo doesnt equal 'bar'</span> 
</IfElse> 

コンテンツは常に何のつもりヒントではありませんコンポーネントは、それは可能性がない：

<IfElse v={foo === 'bar'}> 
    <span>Here's a value</span> 
    <span>Here's another value</span> 
</IfElse> 

あなたのコードの無い状況で誰かがそれをレンダリングするためにどの子選ぶことを推測しません良いチャンスがあります。しかし、三項演算子を使うと、それが意味することをすぐに知り、条件をチェックし、真ならtrueを返し、falseならfalseを返します。

もう一度他の人があなたのコードと何らかの形でやりとりする必要がないなら、あなたが望む方法で自由にスタイルを設定することができます。あなたが他の人が関わっているものをやっているとき、それをたくさんすることは悪い習慣につながることを覚えておいてください。非常に良い理由がない限り、シンプルな/一般的な方法に固執してください。