gatsby.js中简单的如果有条件的语法是什么

Question

我一直在研究文档，但似乎无法在gatsby中找到一个不是渲染条件的简单示例。

我正在寻找一个在render方法中处理的映射对象的比较：（基本伪代码）

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>，上面示例中的元素（它可以是任何其他有效节点）。