Resumo da Transcrição
Neste trecho, o autor discute como injetar dados em um componente funcional chamado Image List para que cada item seja exibido corretamente durante a busca. A seguir, estão os principais pontos abordados na transcrição:
-
Estrutura do Componente: O componente Image List Item receberá dados através de propriedades (props), onde cada item terá informações como URL da imagem e uma descrição.
-
Uso de Props: O autor menciona que, ao utilizar um componente funcional, não é necessário usar a palavra-chave this. As propriedades serão passadas para o componente Image List.
-
Preparação da Fonte de Dados:
- O autor sugere que os dados devem ser injetados utilizando um índice (
index) responsável por realizar pedidos a uma API.
- Inicialmente, ele propõe criar um array de itens (falsos) no arquivo
index, cada um composto de um objeto com ID, URL e descrição.
-
Exemplo de Dados: O autor exemplifica o uso de um URL seguro (HTTPS) e fornece orientações sobre como preencher o array de itens.
-
Mapeamento de Itens: O componente Image List deve passar os itens como propriedades. O autor mostra como usar o método map para iterar sobre os itens, retornando um Image List Item para cada um.
-
Validação: Ele verifica se a propriedade está sendo utilizada corretamente ao passar os dados para o Image List Item.
Em resumo, o autor está demonstrando o processo para que os dados sejam adequadamente afetados ao renderizar os componentes do React, garantindo que a lista de imagens exiba as informações corretas.
Agora que a gente lhe deu com o estilo, é hora de pensarmos como a gente vai injetar
os dados para que cada item apareça com os dados corretos e correspondentes quando a
gente faz uma busca.
Se você olhar aqui no Image List Item, Componente, a gente vai receber os dados desse item específico
via as propriedades que serão dadas.
Então dentro dessa prop a gente vai ter uma propriedade que vai ter os dados do item.
Por exemplo, se eu chamar propriedade de item, então a gente vai se referir por exemplo item
e o URL da imagem e tem descrição.
Como eu estou usando um componente funcional, não preciso da palavra chave dessa.
Então isso que a gente quer que apareça aqui.
Então para isso acontecer a gente tem que ir para Image List e que a gente vai dar propriedade
item com alguma coisa, que um item que será passado com propriedade a esse componente
e vai estar dentro dessa variável, acumento.
E a gente vai ter acesso.
E em vez de ter no aqui a gente vai usar item, por exemplo, o URL e item descrição.
Como se fosse assim.
Mas é claro que agora ainda não tem.
Então vamos mover isso e voltar aqui para Image List.
A gente tem que passar o item.
Mas como a gente vai passar esse item?
Bem a gente tem que ir para o index aqui, porque o index vai ser responsável.
Essa esse componente aqui vai ser responsável por fazer o pedido ao servidor API e receber
como resposta os dados e a gente vai injetar os dados aqui nesse componente Image List.
Por exemplo a gente põe itens com os dados para ser injetados que vão ser passados
como prop para o Image List.
E aqui se a gente quiser passar o item específico a gente vai fazer um loop e vai para cada
item dessa talvez um array dessa coletanner a gente vai passar como dados propriedade
item para o Image List.
Então vamos começar aqui e eu vou fazer é só fazer primeiro eu vou passar uns itens
não do servidor mas só criar aqui no index um variável chamado itens eu posso fazer
um array aqui coletâneo aqui e cada item é um objeto por exemplo eu vou botar um ID
e vou botar por exemplo o URL deixa eu pegar um URL da web aqui eu fui no Google e pesquisei
imagem de cachorro cachorro eu gostei dessa e usa a HTTPS não se esqueça o react needed
se você não tiver uma imagem sem HTTPS não vai funcionar então dá um detalhe pegue
a HTTPS copy essa URL eu só vou botar aqui e o outro vai ser a descrição pode ser qualquer
coisa.
E vou botar outros os só copy a is muda o ID.
E muda umas descrições se você quiser passa seu próprio dados falsos aí.
Digitei certo não sei lá.
Eu botei cinco itens SRA então vamos pegar esses itens e passar com propriedades para
o Image List aqui.
E o Image List será dada a propriedade itens e itens que vai poderá ser acessado do this
props.
Cada um coletâneo de objetos então o que a gente vai fazer aqui no render é em vez
de botar esses caras aqui a gente vai fazer um map vamos primeiro pegar os itens e extrair
das props se eu digitar isso eu estou pegando os itens é a mesma coisa de digitar isso aqui
é a nova maneira do IS6.
Então eu só faço assim para pegar os itens que foram dados como props e a gente vai dar
um map.
Vamos fazer.
Pode chamar de que quiser eu vou dar um map no item aqui bom e primeiro o argumento
da função aqui de flash.
Vai ser o item.
O que eu vou fazer vou retornar uma image list item vou construir esse cara usando os
dados desse item e o que eu vou fazer é passar o item item com a propriedade item é o item
aqui que foi passado.
Lembre-se que esse item vai ser um objeto esse objeto aqui por exemplo.
Isso vai criar um array uma coletânea array.
E você pode só fazer assim.
List item que o react native já reconhece que você tem uma coletânea e vai mostrar
todos os itens.
Vamos ver o que acontece.
Só checar aqui se eu estou usando a propriedade quando eu passo a propriedade item eu tenho
que usar.
Então aqui vai passar.
Comentários
Entre para participar da conversa.
Carregando comentários…