JSX中的if/else反應

-2

我從API中獲取JSON數據，然後需要將其顯示在反應組件中。我需要使用if/else條件。例如。由JSON數據返回的持續時間可能會變爲0或者根本沒有設置，在這種情況下，我需要避免在屏幕上顯示它。所以我需要在行類內部有一個if/else條件並僅在API提供時才顯示Duration數據，我該如何實現這一點？我讀過JSX不支持if/else，那麼在這種情況下有什麼選擇？JSX中的if/else反應

 <div className="row"> 
     //if condition needs to go here 
     <div className="__section--left">Duration</div> 
     <div className="__section--right border"> 
      {item.durationHours} Hours 
      {item.durationMinutes} Minutes 
     </div> 
     </div>

來源

2017-08-17 Manav Saxena

[reactjs JSX Syntax for IF else]的可能重複（https://stackoverflow.com/questions/41089394/reactjs-jsx-syntax-for-if-else） –

檢查[** DOC進行條件着色* *]（https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator） –

請檢查這一點：[是否可以使用if ... else ...聲明在反應渲染功能？]（https://stackoverflow.com/questions/40477245/is-it-possible-to-use-if-else-statement-in-react-render-function） –

您可以使用三元表達 condition ? ifTrue : ifFalse

所以這將是這樣的

<div className="row"> 
    //if condition needs to go here 
    { this.state.something === 'something' ? 
    <div className="__section--left">Duration</div> 
    <div className="__section--right border"> 
    {item.durationHours} Hours 
    {item.durationMinutes} Minutes 
    </div> 
    : null } 
</div>

在上面的代碼中，如果條件真的返回了一些組件，如果假返回什麼。

來源

2017-08-17 07:41:04

JSX中的if/else反應

回答

相關問題