Renderização condicional em React (jsx)

Basicamente, a condição deve ser avaliada como verdadeira ou falsa. Isso é diferente de como as condicionais funcionam em js. Aqui está o que quero dizer:

data.length > 0 && <div />

data.length && <div />

No primeiro caso, se o tamanho da matriz for 0, 0 > 0será avaliado como, falseportanto , será false && [anything really]avaliado como falso, portanto, o componente não será renderizado.

No segundo, no entanto, se o tamanho for 0, 0 && <div />avalia como 0<div />. Em outras palavras, 0 e o elemento serão renderizados. Vindo de js, eu esperaria que o &&operador coagisse 0 no lado esquerdo para um booleano (falso), mas isso não acontece, então ambos são renderizados - é assim que jsx funciona?

Você esperaria que a declaração fosse 0 && <div />avaliada false. Esse seria realmente o caso fora do jsx.

const value = data.length ? 1 : 0;

Que tal a afirmação abaixo, qual você acha que seria o resultado?

data.length ? <div />: <err />;

Então acho que tudo se resume a como os operadores binary (&&)e ternary (? :)lidam com condicionais em jsx - um coage (ternário) e o outro não (binário).

Que tal se trocássemos os operandos do operador binário

<div /> && data.length > 0

Conheço pessoas que ficam longe do operador binário em jsx devido à sua natureza não determinística. Eles usam o ternário e fornecem nullcomo operando quando não querem nada renderizado para uma avaliação particular.

Também descobri que as regras acima funcionam da mesma forma para classNames dinâmicos .

Digamos que você tenha um componente que indica a etapa atual em um processo e deseja dar a ele uma cor / comportamento diferente - estendendo os estilos para todos os componentes da etapa.

<div className={`step ${current ? 'current' : ''}`} />

Que tal usar o nulloperando para a avaliação falsa?

<div className={`step ${current ? 'current' : null}`} />

Que tal tornar-se binário? Bem vamos ver…

<div className={`step ${current && 'current'}`} />

Meu favorito ainda é a string vazia ''para a avaliação falsa. Deixe-me saber a técnica que você implanta .

Se da maneira como você projetou seu componente, você não herdará nenhum estilo, como estou fazendo acima (onde todos os componentes atuais e não atuais têm uma classe pai de step) - e provavelmente está disposto a duplicar algumas das regras ( qual é o dano), então o problema pode se tornar muito mais fácil:

<div className={current ? 'current' : 'not-current'} />

Ainda assim, meu fav é o ''.