有沒有更好的方式來使用jsx內的條件？

Question

過去幾周裏我一直在學習React，而我不喜歡的一件事是我必須在渲染函數內部使用三元運算符。

喜歡的東西：

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

有沒有一種方法，我可以使用傳統的if-else或開關與JSX語法此事反應是？

Answer 1

我利用一些方法來清理成分較複雜的渲染方法。

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 />; 
}