Durante a criação de componentes em ReactJS é muito comum que dado um estado do componente, renderizarmos uma estrutura ou outra. Para fazermos isso no ReactJS/JSX temos algumas alternativas.
Primeira maneira: utilizando if´s
JSX é basicamente um Javascript disfarçado de HTML (sim, apenas para facilitar a criação de templates). Então, podemos utilizar JS para renderizar ou não um treco de template.
import React, { Component } from 'react'
class CondComIf extends Component {
render() {
if (this.props.condicao) {
return <p>Condicao é verdadeira</p>
}
return <p>Condicao é falsa</p>
}
}
Importante: sempre o método render precisa retornar algo e que este algo seja apenas uma tag.
Segunda maneira: condicional com operador lógico
Este formato utiliza a precedência de operadores para funcionar como uma condicional. Por exemplo, se fizermos isso:
a === 10 && b === 20
Temos uma característica interessante. Caso a===10 retorne falso, na grande maioria das linguagens (por termos um &&) não ira nem executar a comparação de b===20.
Isso nos permite fazer o seguinte:
const a = 10
const b = 20
a===b && console.log('A eh igual a B)
Claro que neste exemplo, nunca o console.log será executado, mas creio que fez sentido para você.
Utilizando a mesma ideia, podemos fazer o seguinte:
import React, { Component } from 'react'
class CondComOp extends Component {
render() {
return (
<p>
<h2>Vamos fazer o condicional: </h2>
{this.props.condicao && <span>Condicao é verdadeira</span>}
{!this.props.condicao && <span>Condicao é falsa</span>}
</p>
)
}
}
Importante: o trecho de template que vem após o && deve seguir a mesma regra do return do render. Ou seja, temos que retornar sempre um nó filho (no caso do exemplo um span).
A combinação destas técnicas nos permite chegar a componentes muito bem organizados. Pois se precisarmos renderizar algo totalmente diferente, podemos usar o if. Caso desejamos apenas mostrar/ocultar trechos menores dentro do render, a segunda opção é muito viável.
Não deixe de comentar e nos seguir em todo lugar :) Ah, e para você que quer aprender ReactJS mais rapidamente, temos o nosso curso completo!
Curta o
DevPleno no Facebook,
inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!
