Representação condicional no React

A abordagem de renderização declarativa do React permite que você escreva rapidamente componentes ricos que combinam layout, apresentação e lógica. No entanto, pode tornar a renderização condicional das seções da interface do usuário mais complicada. Aqui estão alguns métodos que você pode usar para exibir componentes sob demanda.

índice

  1. entendendo o problema
  2. Elevação por JSX
  3. Usando expressões condicionais
  4. Cenários em que não há "outros"
  5. Valores de prop condicionais
  6. Condicional Usando Componentes Lógicos
  7. problemas de desempenho
  8. Conclusão

entendendo o problema

Os sistemas de modelagem tradicionais facilitam a implementação da renderização condicional. Veja como você pode fazer isso no Handlebar, um mecanismo de modelagem JavaScript:

 <div class="profile"> {{#if user}} <p>Você está conectado!</p> {{else}} <a href="/login">Login</a> </div> {{/E se}}

Quando você trabalha no React, geralmente escreve JSX . Embora o JSX pareça HTML, ele transpõe o processo de construção do React para o JavaScript normal. Ele termina como uma série de chamadas React.createElement() .

Isso significa que não é possível usar condicionais JavaScript inalteradas no JSX. Tentar algo assim causará um erro de compilação:

 const MyComponent = props => { return ( < div > if ( props. user ) { < p > Você está logado !</ p > } else < a href = "/login" > Login </ a > </ div >); };

Se as declarações em JSX exigirem um pouco mais de reflexão. Existem várias abordagens que você pode escolher. A opção que você escolher irá variar dependendo da complexidade da condição, independentemente de um arquivo de ramificação else estar presente e se a legibilidade do código estiver comprometida.

Elevação por JSX

A maneira mais fácil de corrigir o código acima é levantar o arquivo if fora da instrução de return :

 const MyComponent = props => { if ( props. user ) { return < p > Você está logado !</ p >; } else { return < a href = "/login" > Login </ a >; } } ;

A condição foi removida do JSX. Em vez disso, dois nós JSX separados são usados, com os nós de retorno determinados a partir de uma instrução if file no corpo da função. Essa abordagem é claramente compreensível e mantém os dois ramos completamente separados.

Usando expressões condicionais

A solução acima geralmente só funciona nos componentes mais simples. Muitas vezes, duplica o código, como o <div> de nível superior presente em ambos os nós JSX no exemplo.

Na maioria das vezes, você precisará de algo mais elegante. JSX oferece suporte a expressões JavaScript entre colchetes ( {} ). Você pode usar comparações booleanas e operador ternário para obter uma representação em linha condicional.

 const MyComponent = props => { return ( < div > { props. user ? < p > Você está logado !</ p > : < a href = "/login" > Login </ a > } </ div > ) ; };

Este exemplo funciona conforme o esperado sem qualquer duplicação de código. Quando o usuário for autenticado, o texto de login será exibido. Quando o usuário efetua logout, a expressão retorna false para que o link de login seja exibido.

Expressões em linha são a técnica de renderização condicional JSX mais usada. No entanto, eles podem ser cognitivamente exigentes, especialmente se os valores de retorno verdadeiro e falso forem as próprias expressões. Quando uma expressão fica fora de ordem, ela pode abranger várias linhas. Isso pode melhorar a legibilidade e ajudar a manter o arquivo dentro dos limites de comprimento de linha impostos pelo linter.

Cenários em que não há "outros"

Agora adaptamos o exemplo anterior removendo o texto "você está logado". Nosso gerente de produto decidiu que não é necessário nesta seção do aplicativo. O contêiner <div> agora deve ficar em branco quando o usuário fizer login.

React faz você retornar null para indicar que não há nada para retornar. Ajuste a expressão condicional do componente de acordo.

 const MyComponent = props => { return ( < div > { props. user ? null : < a href = "/login" > Login </ a > } </ div > ) ; };

React também suporta false com o mesmo significado que null . Isso significa que você pode encurtar o acima usando JavaScript. && Operador (e) para realizar uma comparação booleana.

 const MyComponent = props => { return ( < div > { ! props. user && < a href = "/login" > Login </ a > } </ div > ); };

Retorne o lado esquerdo da expressão para false quando o usuário efetuar login. Como as duas partes são unidas por um and , a expressão geral também retorna false . Como resultado, nada é exibido quando o usuário faz login.

Quando desconectado, o lado esquerdo retorna true . O lado direito sempre será verdadeiro, pois resolve para um objeto JavaScript quando JSX é passado. Essa forma de avaliação retorna o lado direito da expressão para que o link de login seja exibido.

As avaliações de JavaScript são "em curto-circuito". Isso significa que o JSX do lado direito não será construído desnecessariamente se a expressão do lado esquerdo retornar false .

Valores de prop condicionais

Você pode condicionar os valores das propriedades usando expressões incorporadas no mesmo estilo das mostradas acima. Use uma avaliação condicional ou ternária para determinar o valor a ser fornecido. Retornar um valor undefined é equivalente a não especificar a prop.

 const MyComponent = props => { return ( < div > < a href = { ( props. user .loggingIn === true ) ? "/dashboard" : "/home" } > Home </ a > </ div > ) ; };

Neste exemplo, o destino do link "Iniciar" é ajustado dinamicamente dependendo se o usuário está logado. Lembre-se de que as props de um componente em JSX são passadas para um objeto JavaScript simples, então essa técnica funciona. Você está realmente digitando o seguinte?

 Reagir. createElement( "a" , { href : ( props. user . logado === true ) ? "/dashboard" : "/home" } );

JSX é simplesmente uma extensão para a sintaxe JavaScript que permite declarar componentes React de uma maneira que se assemelha ao HTML.

Condicional Usando Componentes Lógicos

Outra maneira de obter a renderização condicional é incorporar os chamados componentes "lógicos" no projeto. Estes são componentes simples que tornam seus filhos apenas se uma condição for atendida.

 const IfComponent = props => { if ( props. condition ) return props. crianças; senão retorna null ; } const MyComponent = props => ( < IfComponent condition = { props. user . isLoggedIn } > < a href = "/logout" > Logout </ a > </ IfComponent > ) ;

Este modelo pode criar o código em seu arquivo. render() função mais intuitiva. No entanto, há um grande problema: a elemento a sempre será exibido, mesmo que a condição if não seja atendida. Você pode resolver esse problema adaptando IfComponent para chamar uma função em vez de renderizar os children diretamente.

 const IfComponent = props => { if ( props. condition ) return props. renderCrianças(); senão retorna null ; } const renderContent = ( ) => < a href = "/logout" > Logout </ a >; const MyComponent = props => (< condição IfComponent = { props. user. isLoggedIn } renderContent = { renderContent } /> );

Agora a elemento a é construído apenas quando a condição é realmente satisfeita. Isso reduz a repetição desnecessária, melhorando o desempenho ao usar componentes complexos.

Uma variação deste modelo é criar um componente de ordem superior (HOC). Isso permite incluir um componente com funcionalidade condicional.

 const ifHoc = (condição, componente) => { return props => { if (condição()) return componente (props); senão retorna null ; }; } const LogoutLink = ( ) => < a href = "/logout" > Logout </ a >; const LogoutLinkOnlyWhenLoggedIn = ifHoc (props => props.loggedIn, LoginLink); - const ComponentUsingLoginLink = props => ( < LogoutLinkOnlyWhenLoggedIn logedIn = { props. user . isLoggedIn } /> ) ;

Essa abordagem pode ser um pouco mais difícil de entender no início. Isso é preferível quando você deseja evitar que o componente seja renderizado completamente separado da lógica condicional. Também permite a reutilização de lógica complexa, pois qualquer componente pode ser empacotado ifHoc() . O HOC encapsula o componente original e o renderiza somente quando o funcional condicional passado retorna true .

problemas de desempenho

Algumas considerações gerais de desempenho se aplicam a todas as renderizações condicionais no React. O mais importante é limitar a renderização o máximo possível. Tente não substituir grandes blocos de interface do usuário nos componentes de apresentação. A renderização excessiva pode criar rapidamente uma sensação de "sensação de lentidão".

Da mesma forma, lembre-se de que suas expressões condicionais geralmente serão avaliadas toda vez que seu componente for renderizado. Se as próprias condições forem complexas (como mapear uma matriz de objetos para novos objetos), isso também pode criar uma lentidão, especialmente em hardware de baixo custo.

Conclusão

O React requer que você aborde a renderização condicional de uma maneira um pouco diferente dos sistemas de template tradicionais. Isso ocorre porque apenas JSX se parece com HTML. Ele é realocado para objetos JavaScript, que são então usados ​​com chamadas de função React.

No entanto, você tem várias opções disponíveis quando precisa renderizar condicionalmente um componente. A opção mais simples geralmente é escrever expressões condicionais dentro de seu JSX, usando && ou sintaxe ternária. Você pode retornar a um arquivo if real na raiz do seu render() ou adotar um componente de ordem superior se as expressões JSX dificultarem a compreensão do fluxo de renderização.

  • Os 10 melhores filmes de terror no Hulu (fevereiro de 2021)
  • Como desligar um Apple Watch

descubra mais conteúdo

Google Pixel Watch também tem detecção de queda, mas não até o próximo ano

As melhores xícaras de café aquecidas de 2022

Como automatizar seu iPhone com base na hora, atividade ou localização

"Isso deve ter sido antes do meu tempo"

Por que a NASA enviou Snoopy para a Lua? – Revisão geek

O que é uma carga fantasma?

Deixe uma resposta Cancelar resposta

Qual operador pode ser usado para renderizar condicionalmente um componente React?

A renderização condicional no React funciona da mesma maneira que as condições no JavaScript. Use operadores JavaScript como if ou o operador condicional para criar elementos que representam o estado atual e deixe o React atualizar a interface do usuário para combiná-los.

Como renderizar novamente no React?

Um componente React re-renderiza automaticamente sempre que há uma mudança no estado ou props, basta uma simples atualização de estado de qualquer lugar no código para re-renderizar automaticamente os elementos da interface do usuário.

Quando o React renderiza?

Todo componente React possui um método Render, que é responsável por renderizar o HTML correspondente ao componente no navegador. Esse método é chamado automaticamente quando um componente é criado e quando o estado do componente é atualizado (veremos isso mais adiante).

Como ocultar um elemento no React?

Digamos que temos um componente chamado Demo1 e queremos escondê-lo com base no valor booleano true/false. Podemos usar diferentes operadores condicionais para obter essa funcionalidade. import React , { Component } from " react "; class Demo3 extends Component { constructor() { super(); Este.

Ir arriba