Renderização condicional baseada em estados
Olá, alunos! No tópico anterior, aprendemos sobre padrões de nomenclatura para lidar com eventos.
Hoje, vamos aprender sobre renderização condicional baseada em estados.
O que é renderização condicional?
Renderização condicional é a capacidade de renderizar elementos ou conteúdo condicionalmente, com base em dados ou estados.
Por que usar renderização condicional?
Renderização condicional é uma habilidade essencial para criar interfaces do usuário reativas.
Ao aprender a usar renderização condicional, você poderá criar componentes que respondem às mudanças nos dados ou estados.
Como usar renderização condicional baseada em estados?
Para usar renderização condicional baseada em estados, podemos usar a propriedade condition
do componente.
A propriedade condition
recebe uma expressão booleana que determina se o componente deve ser renderizado.
Exemplo de renderização condicional baseada em estados
Vamos ver um exemplo de como usar renderização condicional baseada em estados:
class App extends React.Component { state = { isLoggedIn: false, }; render() { return ( <div> {this.state.isLoggedIn ? ( <h1>Bem-vindo!</h1> ) : ( <h1>Você não está logado.</h1> )} </div> ); } }
Neste exemplo, o componente App
tem um estado chamado isLoggedIn
.
O componente App
renderiza um h1
com a mensagem “Bem-vindo!” se o estado isLoggedIn
for true
.
O componente App
renderiza um h1
com a mensagem “Você não está logado.” se o estado isLoggedIn
for false
.
Outros métodos para renderização condicional
Além da propriedade condition
, podemos usar outros métodos para renderização condicional em componentes React.
- O método
render()
: Podemos usar o métodorender()
para retornar um elemento ou conteúdo condicionalmente. - O operador ternário: Podemos usar o operador ternário para renderizar um elemento ou conteúdo condicionalmente.
Conclusão
Renderização condicional é uma habilidade essencial para criar interfaces do usuário reativas.
Ao aprender a usar renderização condicional, você poderá criar componentes que respondem às mudanças nos dados ou estados.