A renderização condicional é uma das mais usadas no React. À medida que o aplicativo cresce e as coisas ficam complexas, as instruções de renderização condicional podem se tornar menos legíveis. Neste artigo, discutiremos como escrever belas condicionais em React com facilidade.

Técnicas Comuns de Renderização Condicional

Estas são algumas técnicas usadas ao aplicar renderização condicional em componentes React:

Usando &&

É uma das técnicas mais usadas para renderização condicional. É importante lembrar que esta técnica deve ser usada com muito cuidado, pois pode levar a erros imprevisíveis.

Usando instruções If/Else

Outra técnica para renderização condicional no React é usar instruções if/else. Isso pode resultar em um código de componente complexo quando há várias condições a serem verificadas.

Usando Operador Ternário

O operador ternário é uma técnica popular usada para renderização condicional no React. O problema com o uso do operador ternário é quando você tem várias condições para verificar, levando ao uso do operador ternário aninhado. Isso pode tornar o código menos legível e complexo.

Escrevendo Condicionais Limpos

Apresentando , um componente React simples e minúsculo que permite escrever belas condicionais em React. Isso permitirá que você escreva um código de renderização condicional legível no React rapidamente. Se você precisa testar uma única condição ou uma série de condições, você pode fazer isso com .

O componente funciona de maneira semelhante às instruções if/else e switch/case. Ele permite que você verifique uma série de condições para renderização condicional no React.

No exemplo acima, o código exibe uma mensagem com base nos dias da semana. A última condicional é sempre verdadeira, mas só será renderizada quando todas as condições acima falharem. Ele funciona exatamente como a instrução default switch/case .

O componente aceita a propriedade isTrue , permitindo que você implemente condicionais aninhados. Isso significa que todas as condicionais filhas serão verificadas somente se a condição passada em for avaliada como verdadeira.

Confira este minúsculo componente React aqui no GitHub .

Crie aplicativos da Web combináveis

Não construa monólitos da web. Use o Bit para criar e compor componentes de software desacoplados — em suas estruturas favoritas, como React ou Node. Crie aplicativos escalonáveis ​​e modulares com uma experiência de desenvolvimento poderosa e agradável.

Traga sua equipe para o Bit Cloud para hospedar e colaborar em componentes juntos e acelerar, dimensionar e padronizar o desenvolvimento como uma equipe. Experimente front- ends combináveis ​​com um Design System ou Micro Front-ends , ou explore o back- end combinável com componentes do lado do servidor .

Experimente →

Saber mais