English 中文 العربية 日本語 Português

Conditional Rendering Renderização condicional

Última atualização: 2026-11-03

Conditional Rendering Renderização condicional

O React não tem tag if: renderização condicional significa escrever a lógica JavaScript comum — instruções if, ternários, && — dentro do JSX para que o estado decida qual pedaço de UI renderizar, ou se é melhor devolver null. É assim que um único componente consegue apresentar interfaces completamente diferentes em situações diferentes. Os quatro padrões mais comuns são o ternário, o &&, o retorno antecipado e as variáveis pré-calculadas.

GrupoRenderização e Estado
TipoPadrão
DesdePrimeiras versões do React

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

{isLoggedIn ? <UserPanel /> : <LoginButton />}  // Ternário: escolha um entre dois
{unread > 0 && <Badge count={unread} />}        // &&: renderize ou não renderize nada
if (!ok) return null                            // Retorno antecipado: não renderize nada

Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

No início o painel mostra "Please log in first" com um botão; depois de entrar aparecem uma mensagem de boas-vindas e "You have 3 unread messages"; clicar em "Mark all as read" remove o aviso de não lidas e mostra "All messages read".
▶ Experimente

💡 Pontos-chave

⚠️ Aviso Quando o lado esquerdo do && é o número 0, a página renderiza "0" (0 && ... resulta em 0), então escreva unread > 0 &&.
💡 Dica Quando os ramos são muitos e complicados, extraia a decisão para uma função ou devolva mais cedo, em vez de aninhar ternários num blob de JSX só.
ℹ️ Informação Devolver null significa que o componente não renderiza nada, o que é prático para esconder um componente inteiro quando o usuário não tem permissão.
list-rendering usestate props-callbacks state-updates
Mais casos em breve.

📚 Tutoriais Relacionados

Renderização condicional e renderização de listas
Lição 4: os padrões de renderização condicional — ternário, && e retornos antecipados.

❓ Perguntas Frequentes

P Quais são as formas de escrever renderização condicional no React?
R Quatro comuns: o operador ternário (escolher um entre dois), o && (renderizar ou não renderizar nada), o retorno antecipado e extrair os ramos para variáveis ou funções antes de inseri-los no JSX.
P E se o && renderizar o número 0?
R Porque 0 && x resulta em 0 e isso é renderizado. Transforme a condição em uma comparação como count > 0 && ... ou use um ternário para evitar o problema.
P Posso escrever if-else direto dentro do JSX?
R Não, dentro das chaves cabem apenas expressões. Calcule uma variável com um if antes do return, ou use um ternário para expressar o ramo dentro do JSX.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%