JSX é a sintaxe que permite escrevermos HTML dentro do Javascript (sim, isso parece estranho, rs) em componentes ReactJS. E um fator muito interessante do JSX é que ele não permite trocar o escopo, assim como é possível fazer um loop/repetição em PHP. Onde apenas deixamos o for/foreach/while dentro do escopo do PHP e o HTML fora do escopo seria repetido.
Algo como:
<ul><!-- aqui temos HTML normalmente -->
<?php for($i=0; $i<10; $i++){
<li><?php echo $x ?></li><!-- aqui alternamos o escopo entre HTML/PHP -->
<?php } ?>
</ul>
Perceba que no exemplo anterior, sempre que queremos alternar para PHP, apenas usamos o <?php. Em JSX podemos tentar fazer algo semelhante, porém isso não funcionaria. Pois JSX é Javascript, então não tem como alternarmos o escopo. :(
Forma 1:
Nesta maneira geramos fragmentos de JSX dentro de um array e escrevemos este array onde desejamos a nossa saída. Olhando o código fica mais simples entender:
class Loop1 extends React.Component {
render() {
let rows = []
for (let i = 0; i < 5; i++) {
rows.push(<li>Num: {i}</li>)
}
return (
<div>
<h1>Loop 1:</h1>
<ul>{rows}</ul>
</div>
)
}
}
Apesar de funcionar bem, esta maneira acaba ficando um pouco confusa em componentes um pouco mais complexos.
Forma 2:
Nesta maneira utilizamos um método separado para renderizar cada linha e o método array.map para iterar sobre os valores. Na verdade, poderíamos até mesmo utilizar outro componente na renderização.
class Loop2 extends React.Component {
renderRow(row) {
return <li>Num: {row}</li>
}
render() {
let rows = []
for (let i = 0; i < 5; i++) {
rows.push(i)
}
return (
<div>
<h1>Loop 2:</h1>
<ul>{rows.map(this.renderRow)}</ul>
</div>
)
}
}
Esta forma é a minha favorita para renderizar lista de dados, pois mantem o código bem organizado e permite tratar quando a lista é vazia. Veja este exemplo:
class Loop3 extends React.Component {
renderRow(row) {
return <li>Num: {row}</li>
}
render() {
let rows = []
for (let i = 0; i < 5; i++) {
rows.push(i)
}
if (rows.length == 0) {
return <p>Nenhum item</p>
}
return (
<div>
<h1>Loop 3:</h1>
<ul>{rows.map(this.renderRow)}</ul>
</div>
)
}
}
Se a lista for vazia, ele retorna uma mensagem e não renderiza o loop :)
Você pode ver estes exemplos rodando aqui:
https://codepen.io/tuliofaria/pen/NbZgqKBom pessoal, estas são algumas ideias para utilizar loops em JSX. Como sempre, fiquem a vontade para comentar e até a próxima!
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!
