Renderização condicional no React: um guia prático
Quer aprender como usar a renderização condicional no React? Este artigo explica o básico e mostra alguns exemplos e dicas úteis.
Como implementar renderização condicional em um aplicativo React
Renderização condicional é uma ferramenta poderosa usada para mostrar ou ocultar dinamicamente elementos da IU com base em determinadas condições. Isso torna nossos aplicativos mais interativos e responsivos, pois se adaptam às ações do usuário e às alterações de dados. Existem vários métodos que poderíamos usar para renderizar elementos condicionalmente em reação. Eles incluem:
- usando uma instrução if/else
- usando um operador ternário
- usando o operador lógico AND
- usando instruções switch
- usando componentes de ordem superior
- usando variáveis de elemento
Para ilustrar como essas técnicas funcionam, vamos construir uma barra de navegação (navbar). Uma barra de navegação geralmente contém links para várias seções de um aplicativo da web. No entanto, queremos que o link para nossa página “Carrinho” fique oculto para usuários não autenticados. Para fazer isso, criaremos componentes React, definiremos estados e aplicaremos lógica condicional com base no status de login do usuário.
Usando uma instrução If-else
As instruções if-else são estruturas de fluxo de controle que nos permitem executar códigos diferentes com base no fato de uma condição ser testada como verdadeira ou falsa. Eles podem ser usados para renderizar componentes com base no resultado. Vejamos como isso funciona:
if( condition ){
The task to be done if the condition tests true
}
else {
Tasks to be done when the condition is tested false
}
Agora, com base no cenário apresentado anteriormente, queremos que a barra de navegação tenha um botão extra se o usuário estiver logado, mas que permaneça no estado normal quando o usuário estiver desconectado. Para fazer isso, teremos um objeto JSON que armazena os detalhes de nossos usuários, incluindo seu status de login:
{
"Users": [
{
"Name": "Yemi",
"Age": 23,
"cartProducts": ["Tote bag", "Sports Cap", "Trainers", "Joggers"],
"Status": "loggedIn"
},
{
"Name": "John",
"Age": 30,
"cartProducts": ["Laptop", "Mouse", "Keyboard"],
"Status": "loggedIn"
},
{
"Name": "Alice",
"Age": 25,
"cartProducts": ["Dress", "Shoes", "Bag"],
"Status": "loggedOut"
}
]
}
A seguir, criaremos uma lógica que verifica o status do usuário e renderiza a barra de navegação com base no resultado da condição:
const user = users[0]; // Assuming we want to check the status of the first user
if (user.status === "loggedIn") {
return <LoggedInNavbar />;
} else {
return <LoggedOutNavbar />;
}
Neste trecho de código, acessamos a propriedade user.status que possui uma variável loggedIn. Esta variável é um valor booleano que indica se o usuário está logado. Antes de verificar a condição, criamos uma variável constante chamada user e atribuímos a ela o valor do primeiro elemento (índice 0) da matriz users. Como users é uma matriz de objetos de usuário, isso efetivamente extrai o status de login do primeiro objeto de usuário.
Agora, vamos dar uma olhada em como usamos a instrução if-else para renderizar elementos:
- A instrução if recebe uma condição como argumento. Neste caso, a condição é isLoggedIn.
- Se a condição for verdadeira, o código dentro da instrução if será executado, retornando um elemento de botão Ver carrinho na barra de navegação.< /span>
- Se a condição for falsa, o código dentro da instrução else será executado e isso renderizará a barra de navegação sem o botão extra.
Este é um dos métodos mais comuns usados para renderizar elementos condicionalmente com base nas condições do React. No entanto, isso pode tornar nosso código mais detalhado, especialmente ao lidar com condições simples. É aqui que entra o operador ternário, por ser uma alternativa mais concisa.
Usando um operador ternário
Um operador ternário também é conhecido como operador condicional. É uma maneira mais simples de escrever uma instrução if-else. Tem três partes:
condition ? trueExpression : falseExpression
- A condition é a parte a ser avaliada.
- O trueExpression deve ser executado se a condição for verdadeira.
- O falseExpression deve ser executado se a condição for falsa.
Por exemplo, o trecho de código anterior que usamos para renderizar diferentes barras de navegação pode ser escrito da seguinte forma, usando um operador ternário:
return ( <div> {user.status === "loggedIn" ? <LoggedInNavbar /> : <LoggedOutNavbar />}
</div>
);
};
export default App;
Assim como no cenário anterior, se a condição for verdadeira, a expressão LoggedInNavbar é executada, renderizando o componente LoggedInNavbar. Caso contrário, a expressão LoggedOutNavbar é executada, renderizando o componente LoggedOutNavbar.
Quando usar o operador ternário
O operador ternário é mais adequado para lidar com declarações condicionais simples onde temos dois resultados possíveis. No entanto, pode ser mais apropriado usar uma instrução if-else para lógica condicional mais complexa envolvendo múltiplas condições ou instruções aninhadas.
Usando o operador lógico AND
Um operador AND é um operador lógico usado para avaliar mais de uma condição ou expressão. Ele aceita condições e só testa como verdadeiras quando as duas (ou mais) condições são testadas como verdadeiras.
Por exemplo, vamos supor que queremos apenas usuários registrados como vendedores e logados para acessar a barra de navegação com um botão no painel:
const users = [
{
name: "Yemi",
age: 23,
cartProducts: ["Tote bag", "Sports Cap", "Trainers", "Joggers"],
status: "loggedIn",
userClass: "Admin",
},
];
const user = users[0]; // Assuming we want to check the status of the first user
if (user.status === "loggedIn" && user.userClass === "Admin") {
return <AdminNavbar />;
} else {
return <LoggedOutNavbar />;
}
Neste trecho de código, estamos determinando qual componente da barra de navegação será renderizado com base no status de login e na classe de usuário do primeiro usuário no array users. Ele utiliza uma instrução if-else para verificar se as propriedades user.status e user.userClass atendem aos critérios especificados. Se ambas as condições forem verdadeiras, o código dentro do bloco if é executado, retornando o componente AdminNavbar.
Isso indica que o usuário conectado como administrador deve ver a barra de navegação específica do administrador. Se uma ou ambas as condições forem falsas, o código dentro do bloco else será executado, retornando o componente LoggedOutNavbar. Isso indica que o usuário não está conectado ou não é administrador e deve ver a barra de navegação padrão.
Usando instruções switch
Vamos considerar um cenário onde temos que lidar com múltiplas expressões condicionais simultaneamente. Por exemplo, estamos construindo um aplicativo que tem diferentes níveis de usuários e precisamos renderizar páginas diferentes para cada nível. Se renderizarmos cada uma das páginas usando uma instrução if, isso poderá ficar complicado e até volumoso. É por isso que a instrução switch é uma alternativa melhor. Switch instruções são construções usadas para lidar com vários casos condicionais de uma forma mais organizada. Eles fornecem uma sintaxe mais limpa quando temos uma variável para verificar vários valores possíveis.
Na renderização condicional, as instruções switch podem ser úteis quando temos uma variável (ou prop) específica que queremos usar para determinar qual componente ou conteúdo renderizar com base em diferentes casos. Aqui está um exemplo de como eles funcionam:
switch (user.userClass) {
case "Admin":
return <AdminNavbar />;
case "Customer":
return <CustomerNavbar />; // Assuming a customer should see the CustomerNavBar_
case "Guest":
return <GuestNavbar />; // Assuming a guest should see the GuestNavbar_
default:
return <LoggedOutNavbar />;
}
Neste exemplo, MyComponent pega uma propriedade userClass e usa uma instrução switch para determinar qual componente renderizar com base no valor de . diferente, e o componente associado é atribuído à variável userClass. Cada caso corresponde a um userClasscomponentToRender
As instruções switch podem tornar nosso código mais legível e fácil de manter ao lidar com vários casos condicionais. Eles são especialmente úteis quando temos uma variável que pode assumir valores distintos e queremos tratar cada caso de forma diferente.
O que são componentes de ordem superior?
Componentes de ordem superior (HOCs) são um padrão no React que nos permite reutilizar a lógica dos componentes. Eles funcionam agindo como funções que pegam um componente e retornam um novo componente. O novo componente geralmente é um componente wrapper que adiciona funcionalidade adicional ao componente original. Eles são usados para realizar tarefas como adicionar busca de dados, autenticação ou renderização condicional.
Componentes de ordem superior e renderização condicional
Uma das maneiras mais comuns de usar HOCs é a renderização condicional. Isso ocorre porque eles podem pegar um componente e retornar um componente diferente com base em uma condição. Por exemplo, poderíamos usar um HOC para renderizar condicionalmente um componente com base no fato de um usuário estar logado ou não.
Aqui está um exemplo de como usar um HOC para renderizar condicionalmente um componente:
import React from 'react';
const withLoginCheck = (WrappedComponent) => {
return (props) => {
if (isLoggedIn) {
return <WrappedComponent {...props} />;
} else {
return <p>Please log in to access this content.</p>;
}
};
};
const MyComponent = (props) => {
return <div>Hello, {props.name}!</div>;
};
const App = () => {
return (
<div>
<withLoginCheck(MyComponent) name="John Doe" />
</div>
);
};
Neste exemplo, o withLoginCheck HOC é usado para renderizar condicionalmente o componente MyComponent. Se a variável isLoggedIn for verdadeira, o componente MyComponent será renderizado. Caso contrário, uma mensagem será exibida solicitando que o usuário faça login.
Benefícios do uso de HOCs para renderização condicional
Há vários benefícios em usar HOCs para renderização condicional:
- Reutilização. HOCs podem ser reutilizados em diferentes partes de um aplicativo, o que pode economizar tempo e código.
- Manutenção. HOCs podem tornar o código mais fácil de manter, encapsulando a lógica de renderização condicional em um único lugar.
- Testabilidade. HOCs podem ser facilmente testados, o que pode ajudar a melhorar a qualidade do código.
Usando variáveis de elemento
Variáveis de elemento são outra maneira eficaz de renderizar condicionalmente elementos JSX no React. Eles nos permitem armazenar elementos JSX em variáveis e então renderizar condicionalmente essas variáveis com base em certas condições. Essa abordagem pode tornar nosso código mais conciso e fácil de ler, especialmente ao lidar com cenários complexos de renderização condicional. Por exemplo, vamos considerar um cenário em que queremos mostrar páginas diferentes com base na idade do usuário:
const user = { age: 25 };
const pageContent = user.age >= 18 ? (
<div>
<h1>Welcome, Adult User!</h1>
<p>You have access to all content.</p>
</div>
) : (
<div>
<h1>Welcome, Young User!</h1>
<p>You have access to age-appropriate content.</p>
</div>
);
return <div>{pageContent}</div>;
Neste exemplo, a variável pageContent contém o elemento JSX que será renderizado com base na idade do usuário. O operador condicional é usado para determinar se o conteúdo deve ser renderizado para um usuário adulto ou jovem. Essa abordagem separa efetivamente a lógica condicional da renderização JSX, tornando o código mais legível e fácil de manter.
Tratamento do estado de carregamento ao renderizar componentes
Estado de carregamento é um conceito no React que informa aos usuários que um aplicativo ou site está processando ou recuperando dados ativamente. A renderização condicional é um dos métodos usados para lidar com o estado de carregamento, porque geralmente envolve a exibição dinâmica de diferentes elementos da interface do usuário com base no estado do processo de carregamento de dados. Isso melhora a experiência do usuário, pois garante feedback em todas as etapas do aplicativo.
Por exemplo, podemos renderizar condicionalmente um indicador de carregamento enquanto os dados estão sendo buscados e então mudar para renderizar os dados reais assim que estiverem disponíveis. Isso garante que os usuários vejam informações relevantes no momento apropriado.
Aqui está um exemplo de como usar a renderização condicional para exibir um indicador de carregamento enquanto os dados são buscados:
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) => {
setData(json);
setIsLoading(false);
});
}, []);
return (
<div>
{isLoading ? <p>Loading...</p> : data.map((post) => <p key={post.id}>{post.title}</p>)}
</div>
);
};
Neste exemplo, a variável de estado isLoading é usada para rastrear se os dados foram carregados. O gancho useEffect é usado para buscar dados de uma API e, quando os dados estiverem disponíveis, o estado isLoading é atualizado para falso. A lógica de renderização condicional garante que o indicador de carregamento seja renderizado enquanto os dados estão sendo carregados e, quando os dados estiverem disponíveis, a lista de postagens será renderizada.
Usando o estado do componente para renderização dinâmica
O estado do componente são dados mutáveis armazenados em um componente que nos permite armazenar e gerenciar informações específicas desse componente. Ele é gerenciado dentro do próprio componente e pode ser atualizado usando o método setState(). Quando o estado muda, o React renderiza novamente o componente e seus filhos, permitindo-nos atualizar dinamicamente a UI com base no novo valor do estado. Por exemplo:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
Neste exemplo, o componente Counter mantém uma contagem de variável de estado e a atualiza usando o método setCount(). O manipulador onClick aciona a atualização e o React renderiza novamente o componente, atualizando o valor de contagem exibido.
Usando acessórios para renderização dinâmica
Props são argumentos que consistem em dados transmitidos de componentes pais para componentes filhos. Eles fornecem uma maneira de comunicar dados e controlar o comportamento dos componentes filhos do pai. Quando o componente pai atualiza seus adereços, o componente filho recebe os novos dados e é renderizado novamente de acordo.
Por exemplo:
import React from 'react';
const Greeting = ({ name }) => {
return (
<p>Hello, {name}!</p>
);
};
const App = () => {
return (
<div>
<Greeting name="John Doe" />
<Greeting name="Jane Doe" />
</div>
);
};
Neste exemplo, o componente Greeting recebe uma propriedade name do componente App. O componente Greeting é renderizado novamente sempre que o componente App atualiza a propriedade name, exibindo a saudação apropriada para cada indivíduo.
Agora, assim como o outro método que mencionamos, as mudanças no estado do componente ou nos adereços podem acionar a renderização condicional, mostrando ou ocultando dinamicamente elementos específicos com base nos dados atualizados. Essas técnicas nos permitem construir componentes de UI que se adaptam e mudam com base nas interações do usuário, nas alterações de dados e no fluxo de informações dentro do aplicativo. Por exemplo:
import React, { useState } from 'react';
const UserStatus = ({ isAdmin }) => {
let statusElement;
if (isAdmin) {
statusElement = <p>Administrator</p>;
} else {
statusElement = <p>Customer</p>;
}
return (
<div>
{statusElement}
</div>
);
};
Neste exemplo, o componente UserStatus renderiza condicionalmente um elemento de UI diferente com base no valor da propriedade isAdmin. Quando isAdmin é testado como verdadeiro, a mensagem do administrador é renderizada. Caso contrário, a mensagem padrão do usuário será exibida.
Tratamento de erros na renderização condicional
O tratamento de erros na renderização condicional é crucial para a criação de aplicativos React robustos e fáceis de usar. Envolve lidar com situações inesperadas com elegância e fornecer feedback apropriado aos usuários, evitando que eles encontrem elementos de interface do usuário confusos ou quebrados. Esses erros podem surgir devido a:
- mau funcionamento ao buscar dados
- entrada de usuário inválida
- erros de configuração de componentes
Como lidar com erros na renderização condicional
Faça uso de componentes de limite de erro para capturar e tratar erros em seus componentes filhos.
Implemente elementos de UI substitutos para exibição quando ocorrerem erros. Esses elementos podem fornecer mensagens informativas, conteúdo alternativo ou sugerir opções de nova tentativa.
Implemente mecanismos de registro de erros para registrar e rastrear erros para depuração e análise. Isso ajuda a identificar problemas recorrentes e melhorar estratégias de tratamento de erros.
Forneça notificações de erro claras e acionáveis aos usuários, informando-os sobre o problema e sugerindo possíveis soluções ou soluções alternativas.
Um exemplo de tratamento de erros na renderização condicional
import React from 'react';
const DataFetcher = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((json) => setData(json))
.catch((err) => setError(err));
}, []);
if (error) {
return <p>Error fetching data: {error.message}</p>;
}
if (!data) {
return <p>Loading...</p>;
}
return <div>{data.title}</div>;
};
Neste exemplo, o componente DataFetcher trata possíveis erros verificando a variável de estado do erro. Se ocorrer um erro, uma mensagem de erro será exibida. Se os dados ainda estiverem sendo carregados, um indicador de carregamento será mostrado. Depois que os dados são buscados com sucesso, os dados reais são renderizados.
Ao adicionar técnicas eficazes de tratamento de erros na renderização condicional, podemos criar aplicativos React que são resilientes, fáceis de usar e capazes de lidar com situações inesperadas com elegância.
