English 中文 العربية 日本語 Português

Nested Lists Listas aninhadas

Última atualização: 2026-11-03

Nested Lists Listas aninhadas

Quando os dados têm uma estrutura de vários níveis, como categorias que contêm entradas, você renderiza uma lista aninhada com um map dentro de outro map ou com um componente recursivo. Cada nível mantém suas próprias keys, a indentação expressa a hierarquia, e o padrão aparece em menus, threads de comentários e árvores de arquivos. Um componente recursivo é a opção mais flexível, porque lida com qualquer profundidade.

GrupoRenderização e Estado
TipoPadrão
DesdePrimeiras versões do React

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

function TreeNode({ node }) {
  return (
    <li>
      {node.name}
      {node.children?.map((kid) => (
        <TreeNode key={kid.id} node={kid} />  // Renderize os filhos recursivamente
      ))}
    </li>
  )
}

Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Uma árvore de arquivos interativa em monoespaçado: a pasta raiz src pode ser clicada para recolher ou expandir, e contém o arquivo main.jsx e a subpasta components, que por sua vez contém Button.jsx; a hierarquia é expressa pela indentação.
▶ Experimente

💡 Pontos-chave

💡 Dica Dê aos dados da árvore ids estáveis e únicos desde o início, e mantenha o estado de expandido/recolhido em um único lugar, indexado por id.
⚠️ Aviso Um componente recursivo precisa de uma condição de término (filhos vazios) e de uma key em cada nível, senão ele entra em laço infinito ou gera avisos.
ℹ️ Informação Quando a profundidade é fixa (um menu de dois níveis, por exemplo), um map dentro de outro map é mais claro; recorra a um componente recursivo só quando a profundidade variar.
list-rendering list-key component component-tree
Mais casos em breve.

📚 Tutoriais Relacionados

Renderização condicional e renderização de listas
Lição 4: de uma lista plana a uma estrutura de árvore.

❓ Perguntas Frequentes

P Como o React renderiza dados em formato de árvore?
R De duas formas: quando a profundidade é fixa, um map dentro de outro map; quando a profundidade varia, um componente recursivo que chama a si mesmo sobre os filhos.
P No que devo prestar atenção em componentes recursivos?
R Eles precisam de uma condição de término para evitar recursão infinita, cada nível precisa de uma key única, e o estado de expandido fica melhor guardado em um único lugar do que espalhado pelos níveis.
P Como defino as keys em uma lista aninhada?
R Cada nível do map fornece a sua própria key única, normalmente o id do nó daquele nível; basta a unicidade dentro do nível, e níveis diferentes podem repetir valores.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%