A renderização condicional refere-se à alteração do comportamento de um aplicativo dependendo de seu estado. Por exemplo, você pode alterar a mensagem de saudação do seu aplicativo React para escuro durante a noite. Desta forma, você tem uma mensagem de exibição diferente dependendo da hora do dia.

A renderização condicional permite renderizar diferentes componentes ou elementos do React se uma condição for atendida. Neste tutorial, você aprenderá sobre as diferentes maneiras de usar a renderização condicional em aplicativos React.js.

Maneiras de implementar a renderização condicional

Para acompanhar esses exemplos, você precisa ter um entendimento básico de como o React funciona. Se você está tendo dificuldades nesse caso, não se preocupe - temos uma ferramenta útil guia para iniciantes do React.js.

Usando instruções condicionais

Como em JavaScript, você pode usar declarações condicionais como if…else para criar elementos quando certas condições forem atendidas.

Por exemplo, você pode exibir um elemento especificado no

E se bloquear quando uma condição for atendida e exibir uma diferente no outro bloquear se a condição não for atendida.

Considere o exemplo a seguir que exibe um botão de logon ou logout dependendo do status de logon do usuário.

function Dashboard (props) {
 const { isLoggedIn } = adereços
 if (isLoggedIn){
 Retorna Sair
 } outro{
 Retorna Conecte-se
 }
}

Esta função renderiza um botão diferente dependendo do isLoggedIn valor passado como prop.

Relacionado: Como usar adereços no ReactJS

Alternativamente, você pode usar o operador ternário. O operador ternário recebe uma condição seguida pelo código a ser executado se a condição for verdadeiro seguido pelo código a ser executado se a condição for falso.

Reescreva a função acima como:

function Dashboard (props) {
 const { isLoggedIn } = adereços
 Retorna (
 <>
 {está logado?Sair:Conecte-se)
 )
}

O operador ternário torna a função mais limpa e fácil de ler em comparação com o se... senão declaração.

Declarando Variáveis ​​de Elemento

Variáveis ​​de elemento são variáveis ​​que podem conter elementos JSX e serem renderizadas quando necessário em um aplicativo React.

Você pode usar variáveis ​​de elemento para renderizar apenas uma determinada parte do componente quando seu aplicativo atender à condição especificada.

Por exemplo, se você quiser renderizar apenas um botão de login quando o usuário não estiver conectado e um botão de logout somente quando estiver conectado, você poderá usar variáveis ​​de elemento.

function LoginBtn (props) {
 Retorna (

 Conecte-se

 );
}
function LogoutBtn (props) {
 Retorna (

 Sair

 );
}
function Painel() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (verdadeiro)
 }
 const handleLogout = () => {
 setLoggedIn (falso)
 }
 botão deixe;
 if (conectado) {
 botão = 
 } outro {
 botão = 
 }
 Retorna (
 <>
 {logado}
 )
}

No código acima, primeiro criei os componentes do botão Login e Logout e, em seguida, defina o componente para renderizar cada um deles em condições diferentes.

Neste componente, use o gancho de estado React para acompanhar quando o usuário está logado.

Relacionado: Domine suas habilidades de reação aprendendo esses ganchos adicionais

Agora, dependendo do estado, renderize o ou componente.

Se o usuário não estiver logado, renderize o componente, caso contrário, renderize the componente. As duas funções de manipulação alteram o estado de login quando o respectivo botão é clicado.

Usando operadores lógicos

Você pode usar lógica && operador para renderizar condicionalmente um elemento. Aqui, um elemento é renderizado apenas se a condição for avaliada como verdadeira, caso contrário, será ignorada.

Se você quiser notificar um usuário sobre o número de notificações que ele tem apenas quando tiver uma ou mais notificações, você pode usar o seguinte.

function ShowNotifications (props) {
 const { notificações } = adereços
 Retorna (
 <>
 {notifications.length > 0 &&

 Você tem notificações de {notifications.length}.


 }
 )
}

Em seguida, para renderizar um elemento se a expressão lógica && for avaliada como um valor falso, encadeie o || lógico || operador.

A função a seguir exibe a mensagem “Você não tem notificações” se nenhuma notificação for passada como props.

function ShowNotifications (props) {
 const { notificações } = adereços
 Retorna (
 <>
 {notifications.length > 0 &&

 Você tem notificações de {notifications.length}.
 || 
Você não tem notificações

 }
 )
}

Impedir a renderização de um componente

Para ocultar um componente mesmo que tenha sido renderizado por outro componente, retorne null, em vez de sua saída.

Considere o seguinte componente que renderiza apenas um botão de aviso se uma mensagem de aviso for passada como props.

função Aviso (adereços) {
 const {warningMessage} = adereços
 if (!mensagem de aviso) {
 retornar nulo
 }
 Retorna (
 <>
Aviso
 )
}

Agora, se você passar em ‘warningMessage’ para o componente, um botão de aviso será renderizado. No entanto, se você não fizer isso, retornará null e o botão não será exibido.

 // o botão de aviso é renderizado
 // o botão de aviso não é renderizado

Exemplos de renderização condicional em aplicativos React da vida real

Use a renderização condicional para realizar diferentes tarefas em seu aplicativo. Alguns deles incluem renderização de dados de API apenas quando disponíveis e exibir uma mensagem de erro somente quando existe um erro.

Renderizando dados obtidos de uma API no React

A busca de dados de uma API pode demorar um pouco. Portanto, primeiro, verifique se ele está disponível antes de usá-lo em seu aplicativo, caso contrário, o React gerará um erro se não estiver disponível.

A função a seguir mostra como você pode renderizar condicionalmente os dados retornados por uma API.

function BuscarDados() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Busca dados da API usando Axios
 const fetchData = assíncrono () => {
 resposta const = aguardar axios.get (apiURL)
 // Atualiza o estado com os dados
 setData (resposta.dados) 
 }
 Retorna (
 <>
Astronomia foto do dia

 {
 dados && 
{data.title}

{dados.explicação}

 }
 )
}

Na função acima, busque os dados do API Apod da NASA usando Axios. Quando a API retornar uma resposta, atualize o estado e use o operador lógico && para renderizar os dados somente quando estiverem disponíveis.

Relacionado: Como consumir APIs em React usando Fetch e Axios

Exibindo mensagens de erro

Nos casos em que você deseja exibir um erro apenas quando ele existe, use a renderização condicional.

Por exemplo, se você estiver criando um formulário e quiser exibir uma mensagem de erro se um usuário digitar no formato de e-mail errado, atualize o estado com a mensagem de erro e use uma instrução if para renderizá-la.

função showError() {
 const [erro, setError] = useState (null)
 Retorna (
 <>
 {
 se (erro) {
Ocorreu um erro: {erro}

 }
 }
 )
}

Escolhendo o que usar em seu aplicativo React

Neste tutorial, você aprendeu sobre as várias maneiras de renderizar condicionalmente elementos JSX.

Todos os métodos discutidos fornecem os mesmos resultados. Faça uma escolha sobre o que usar dependendo do caso de uso e do nível de legibilidade que você deseja alcançar.

7 melhores tutoriais gratuitos para aprender a reagir e criar aplicativos da Web

Os cursos gratuitos raramente são tão abrangentes e úteis - mas encontramos vários cursos do React que são excelentes e o ajudarão a começar com o pé direito.

Leia a seguir

Sobre o autor