javascript - 如何检查 Gatsby 中的前题是否为空

Question

假设我有一个来自 markdown 和 yaml 的内容源，其前面的内容有时具有空值。例如:

# front matter
title: Foo
subtitle:

// foo.js
import React from 'react';

const Foo = ({data}) => {
    return(
       // check if {data.subtitle} not empty 
       // <p>{data.subtitle}/p>
       // else
       // ...
    )
}

export default Foo;

我想知道检查前文值(value)的最佳方法是什么。是通过jsx模板中的条件语句(if else)吗？

主要目标是，如果特定前文的值不为空，Gatsby 仅渲染某些元素

Answer 1

JSX 中有两种常见的条件渲染模式:

1. 如果您只想在为真(或不为真)时渲染，请使用 && :

   {data.subtitle && <p>{data.subtitle}</p>}
   // or
   {!renderDisabled && <p>Something</p>}
   

   请注意，在第二种情况下，您没有使用 || ;这是因为如果语句的左侧为真，它将被返回并呈现，并且您可能不打算输出类似 <div>true</div> 的内容。 .

2. 如果您想根据条件渲染两个不同分支之一，请使用三元:

   {data.subtitle ? <p>{data.subtitle}</p> : <p>Default subtitle</p>}