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 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>元素（它可以是任何其他有效节点）。

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

1 个答案: