gatsby.js 中簡單 if 條件的語法是什么

Question

我一直在梳理文檔，但似乎無法在 gatsby 中找到一個不是渲染器條件的簡單條件示例。

我希望在渲染方法中處理的映射對象中進行比較：（基本偽代碼）

class someTemplate extends Component {
  render() {
    const someobject = this.props.data.someobject

    return (
      <div id="page-wrapper">
        {someobject.map((layout, i) => {
            return (
            <div className={(i === 0 ? (`slideshow-item shown`) : (`slideshow-item`) )}>

                {if(i === 1)} 
                    show something 
                {else if(i === 2)} 
                    show something else 
                {else} 
                    show default 
                {/if}

            </div>
            )
          })
        }
      </div>
    )
  }
}

所以你看到的 className 的三元工作正常。 但作為一個例子，我可能在循環中有 15 個項目，並且我想確保我為前 3 個項目設置類，例如。 在我的發現中，我看到很多人在 return 語句之外給出了條件渲染的示例，但我不想讓整個代碼塊成為幾個簡單類的條件。

這在 gatsby.js 中是可能的，還是我真的需要將事情分解成組件來實現如此簡單的事情？

Answer 1

這樣的條件與蓋茨比本身沒有任何關系。 您現在已進入JSX 語法世界。 你可以這樣寫：

<div className={i === 0 ? `slideshow-item shown` : `slideshow-item`}>
  {i === 1 && <span>show something</span>}
  {i === 2 && <span>show something else</span>}
  {i > 2 && <span>show default</span>}
</div>

另請注意，您需要返回一個節點 - 因此上面示例中的<span>元素（它可以是任何其他有效節點）。

編輯：代替<span>元素，可以使用React.Fragment來避免額外的 DOM 元素：

{i === 1 && <>show something</>}