javascript - 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

这样的条件与 Gatsby 本身没有任何关系。您现在位于JSX syntax世界。你可以这样写:

<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>元素a React.Fragment可用于避免额外的 DOM 元素:

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