Как проверить, пусто ли дело в Гэтсби

Question

Скажем так, у меня есть источник контента, который исходит от уценки и yaml с фронтом, который иногда имеет пустое значение. Например:

# my fornt 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;

Интересно, как лучше всего проверить значение фронта? Это через условные операторы (если еще) в шаблоне jsx?

Основная цель состоит в том, что Гэтсби рендерит некоторые элементы, только если значение определенного фронта не пусто

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

Answer 2

Я думаю, это стилист c, но самый краткий путь - это троичный

return data.subtitle? <p>{data.subtitle}</p>:<>Whatever else </>