Este artigo irá ensinar como renderizar uma matriz no React, além das melhores práticas para usar ao renderizar diferentes elementos dentro de componentes.
Uma das vantagens de usar uma linguagem Web moderna como o JavaScript é a possibilidade de automatizar rapidamente a geração de porções de HTML.
Usar algo como um loop em uma matriz ou um objeto significa que só é necessário escrever o HTML uma vez por item. Melhor ainda, qualquer edição futura precisaria ser aplicada apenas uma vez.
Para renderizar vários elementos JSX no React, você pode percorrer uma matriz com um loop com o método .map()
e retornar um único elemento.
Abaixo, um loop é usado em uma matriz reptiles
e um elemento li
é retornado para cada item nela. Use este método quando quiser exibir um único elemento para cada item na matriz:
function ReptileListItems() {
const reptiles = ["alligator", "snake", "lizard"];
return reptiles.map((reptile) => <li>{reptile}</li>);
}
O resultado ficará parecido com este:
Output- alligator
- snake
- lizard
No exemplo a seguir, você irá examinar por que adicionar uma key
única a uma lista de elementos renderizados por uma matriz.
Neste exemplo, você percorre uma matriz com um loop e cria uma série de componentes de item de lista como no exemplo anterior.
Para iniciar, atualize o código a fim de usar o componente <ol>
e manter os itens <li>
. O componente <ol>
irá criar uma lista ordenada dos itens:
function ReptileList() {
const reptiles = ["alligator", "snake", "lizard"];
return (
<ol>
{reptiles.map((reptile) => (
<li>{reptile}</li>
))}
</ol>
);
}
No entanto, se olhar para o console, você verá um aviso de que cada filho em uma matriz ou iterador deve possuir uma chave única.
O aviso aparece porque quando você tenta renderizar uma coleção dentro de um componente, é necessário adicionar uma key
.
No React, uma key
única é usada para determinar qual dos componentes em uma coleção precisa ser renderizado novamente. Adicionar uma key
única impede o React de precisar renderizar novamente o componente inteiro cada vez que houver uma atualização.
Neste passo, você irá renderizar vários elementos em um componente e adicionar uma chave
única. Atualize o código para incluir uma key
nos itens de lista para solucionar o aviso:
function ReptileList() {
const reptiles = ['alligator', 'snake', 'lizard'];
return (
<ol>
{reptiles.map(reptile => (
<li key={reptile}>{reptile}</li>
))}
</ol>
);
}
Agora que você adicionou uma key
, o aviso não estará mais no console.
No exemplo seguinte, você verá como renderizar elementos adjacentes sem encontrar um erro de sintaxe comum.
No JSX, para renderizar mais de um elemento em um componente, é necessário adicionar um wrapper em volta deles.
Neste exemplo, você irá primeiro retornar uma lista de itens sem percorrer um loop por uma matriz:
function ReptileListItems() {
return (
<li>alligator</li>
<li>snake</li>
<li>lizard</li>
);
}
Isso lhe dará um erro de sintaxe no console:
Para corrigir esse erro, é necessário encapsular o bloco de elementos li
em um wrapper. Para uma lista, é possível encapsulá-los em um elemento ol
ou ul
:
function ReptileListItems() {
return (
<ol>
<li>alligator</li>
<li>snake</li>
<li>lizard</li>
</ol>
);
}
Os elementos <li>
adjacentes agora estão encapsulados em uma tag de fechamento, <ol>
, e você não verá mais um erro.
Na seção seguinte, você irá renderizar uma lista em um wrapper usando um componente fragment
.
React.fragment
Antes do React v16.2, era possível encapsular um bloco de componentes em um elemento <div>
. Isso geraria um aplicativo cheio de divs
, muitas vezes conhecido como “sopa de div”.
Para corrigir esse problema, o React lançou um novo componente conhecido como o componente fragment
:
Quando precisar renderizar uma lista dentro de uma tag de fechamento, mas não quiser usar um div
, use o React.Fragment
como alternativa:
function ReptileListItems() {
return (
<React.Fragment>
<li>alligator</li>
<li>snake</li>
<li>lizard</li>
</React.Fragment>
);
}
O código renderizado irá incluir apenas os elementos li
e o componente React.Fragment
não aparecerá no código.
Além disso, observe que não é necessário adicionar uma chave com o React.fragment
.
Você pode achar que escrever o React.fragment
é mais enfadonho do que adicionar um <div>
. Felizmente, a equipe do React desenvolveu uma sintaxe mais curta para representar este componente. Você pode usar <> </>
no lugar de <React.Fragment></React.Fragment>
:
function ReptileListItems() {
return (
<>
<li>alligator</li>
<li>snake</li>
<li>lizard</li>
</>
);
}
Neste artigo, você explorou vários exemplos de como renderizar matrizes em um aplicativo React.
Ao renderizar um elemento dentro de outro componente, é recomendável usar uma key
única e encapsular seus elementos dentro de um elemento wrapper.
Dependendo do seu caso de uso, é possível criar listas simples encapsuladas em um componente fragment
que não precisa de uma chave.
Para aprender mais sobre as melhores práticas com o React, siga a série completa Como programar no React.js da DigitalOcean.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.