我一直在研究文档,但似乎无法在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中实现?还是我真的需要将这些东西分解成多个组件才能实现如此简单的功能?

最佳答案

这种情况与 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>元素,可以使用React.Fragment避免额外的DOM元素:
{i === 1 && <>show something</>}

关于javascript - gatsby.js中简单的如果有条件的语法是什么,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53508119/

10-12 01:16
查看更多