jsxの中で条件式を使う良い方法はありますか？

Question

私は過去数週間、Reactを学んできました。私が気に入らないことの1つは、レンダリング機能の中で他の場合に三項演算子を使わなければならないということです。以下のような

何か：

function render() { 
    return (
     {x==="Let's go" ? <Go /> : <Hold on />} 
    ) 
} 

は、私があれば、他の伝統を使用するか、リアクトでJSX構文とそのことについては切り替えることができます方法はありますか？

Answer 1

を好む私は、より複雑なコンポーネントのrenderメソッドをクリーンアップするためにいくつかのアプローチを利用します。

1）変数を使用します。実際にJSX部分（リターン）に入る前に、生のJSの柔軟性を使って変数を構築することができます。あなたの例を挙げる...

function render() { 
    let body; 
    if (x === "Let's go") { 
     body = <Go /> 
    } else { 
     body = <Hold on />; 
    } 
    return (
     <div> 
      {body} 
     </div> 
    ); 
} 

トップレベルはラップする必要があることに注意してください。余分なdivを入れてください。

2）関数を使用します。

renderBody() { 
    let body; 
    if (x === "Let's go") { 
     body = <Go /> 
    } else { 
     body = <Hold on />; 
    } 
    return (
     {body} 
    ) 
} 

render() { 
    return (
     <div> 
      {renderBody()} 
     </div> 
    ) 
} 

3）配列（＃1の本当にサブセットを使用）が、しばしば、私は時々、私は1つの要素を返す必要がシナリオを見つける...この例では、おそらく少し単純すぎるが、あなたのアイデアを得るでしょう他の回は要素の可変数を返す必要があります。私は、関数の先頭に配列を作成し、要素を配列にプッシュ/アンシフトします。配列を作成するときはいつでも、Reactが正しく更新できるように各要素のキーを提供する必要があることに注意してください。

let els = [ 
    <div key="always">Always here</div> 
]; 
if (foo) { 
    els.push(<div key="ifFoo">Conditionally Here</div>) 
} 

次に、メインのJSXで{els}変数を使用します。

4）レンダリングしたくないときはnullを返します。

Answer 2

私はこの構文

function render() { 
    if (x==="Let's go") return <Go />; 
    return <Hold on />; 
}