One place for hosting & domains

      renderizar

      Cómo renderizar matrices en React


      Introducción

      Este artículo le enseñará a renderizar una matriz en React y cuáles son las mejores prácticas para renderizar diferentes elementos dentro de los componentes.

      Una de las ventajas de usar un lenguaje web moderno como JavaScript es que puede automatizar rápidamente la generación de los fragmentos HTML.

      Usar algo similar a un bucle, en vez de una matriz o un objeto, significa que solo debe escribir el HTML para cada elemento una sola vez. Mejor aún, las futuras ediciones solo deben aplicarse una vez.

      Cómo renderizar múltiples elementos

      Para renderizar múltiples elementos JSX en React, puede ejecutar un bucle en una matriz con el método .map() y devolver un solo elemento.

      A continuación, ejecute un bule en la matriz reptiles y devuelva un elemento li para cada elemento en la matriz. Puede usar este método cuando desee mostrar un solo elemento para cada elemento de la matriz:

      function ReptileListItems() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return reptiles.map((reptile) => <li>{reptile}</li>);
      }
      

      El resultado tendrá el siguiente aspecto:

      Output

      - alligator - snake - lizard

      En el siguiente ejemplo, examinará por qué es recomendable añadir una key única a una lista de elementos renderizados por una matriz.

      Cómo renderizar una colección de elementos dentro de un componente

      En este ejemplo, ejecutará un bucle en una matriz y creará una serie de componentes de elemento de lista, como en el ejemplo anterior.

      Para comenzar, actualice el código para usar el componente <ol> para mantener los elementos <li>. El componente <ol> creará una lista ordenada de los elementos:

      function ReptileList() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return (
          <ol>
            {reptiles.map((reptile) => (
              <li>{reptile}</li>
            ))}
          </ol>
        );
      }
      

      Sin embargo, si observa la consola, verá una advertencia indicando que cada elemento secundario en una matriz o iterador debe tener una key única.

      Advertencia en la consola

      La advertencia aparece porque, al intentar renderizar una colección dentro de un componente, debe agregar una key.

      En React, se utiliza una key única para determinar cuáles de los componentes de una colección deben volverse a renderizar. Añadir una key única evita que React tenga que volver a renderizar todo el componente cada vez que haya una actualización.

      En este paso, renderizará múltiples elementos en un componente y añadirá una key única. Actualice el código para incluir una key en los elementos de la lista para resolver la advertencia:

      function ReptileList() {
        const reptiles = ['alligator', 'snake', 'lizard'];
      
        return (
          <ol>
            {reptiles.map(reptile => (
              <li key={reptile}>{reptile}</li>
            ))}
          </ol>
        );
      }
      
      

      Ahora que añadió una key, la advertencia ya no aparecerá en la consola.

      En el siguiente ejemplo, verá cómo renderizar elementos adyacentes sin encontrar un error de sintaxis común.

      Cómo renderizar elementos adyacentes

      En JSX, para renderizar más de un elemento en un componente, debe agregar un contenedor alrededor de ellos.

      En este ejemplo, primero devolverá una lista de elementos sin ejecutar un bucle en una matriz:

      function ReptileListItems() {
        return (
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        );
      }
      

      Esto generará un error grave en la consola:

      Error grave de React para elementos JSX adyacentes

      Para solucionar este error, deberá encapsular el bloque de elementos li en un contenedor. Para obtener una lista, puede encapsularlos en un elemento ol o ul:

      function ReptileListItems() {
        return (
        <ol>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        </ol>
        );
      }
      

      Los elementos <li> adyacentes ahora están encapsulados en una etiqueta <ol>, y ya no se visualizará el error.

      En la siguiente sección, renderizará una lista en un contenedor usando un componente fragment.

      Cómo renderizar elementos adyacentes con React.fragment

      Antes de React v16.2, un bloque de componentes se podía encapsular en un elemento <div>. Esto daba como resultado a una aplicación llena de divs, a menudo denominada “div soup”.

      Para solucionar este problema, React lanzó un nuevo componente conocido como fragment:

      Cuando necesite renderizar una lista dentro de una etiqueta cerrada, pero quiera evitar tener que usar un div, puede usar React.Fragment en su lugar:

      function ReptileListItems() {
        return (
        <React.Fragment>
           <li>alligator</li>
           <li>snake</li>
           <li>lizard</li>
        </React.Fragment>
        );
      }
      

      El código renderizado solo incluirá los elementos li, y el componente React.Fragment no aparecerá en el código.

      Elementos JSX renderizados dentro de un contenedor React.Fragment

      Además, tenga en cuenta que con React.fragment no necesita añadir una key.

      Notará que escribir React.fragment es más tedioso que añadir un <div>. Por suerte, el equipo de React desarrolló una sintaxis más corta para representar este componente. Puede usar <> </> en lugar de <React.Fragment></React.Fragment>:

      function ReptileListItems() {
        return (
       <>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
       </>
        );
      }
      

      Conclusión

      En este artículo, analizó varios ejemplos para renderizar matrices en una aplicación React.

      Al renderizar un elemento dentro de otro componente, debe usar una key única y encapsular los elementos dentro de un elemento contenedor.

      Dependiendo de su caso de uso, puede crear listas simples encapsuladas en un componente fragment que no necesite una key.

      Para obtener más información sobre las mejores prácticas en React, siga la serie completa Cómo codificar en React.js en DigitalOcean.



      Source link

      Compreendendo como renderizar matrizes no React


      Introdução

      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.

      Renderizando vários elementos

      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.

      Renderizando uma coleção de elementos dentro de um componente

      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.

      Aviso no console

      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.

      Renderizando elementos adjacentes

      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:

      Erro de sintaxe do React para elementos JSX adjacentes

      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.

      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.

      Elementos JSX renderizados dentro de um wrapper React. Fragment

      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>
       </>
        );
      }
      

      Conclusão

      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.



      Source link