Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Como o novo component identifica cada parametro?

Referente ao curso Next.js: explorando o framework, no capítulo Conhecendo Next.js e atividade Faça como eu fiz: passHref

por Victor Specke Manoel
| 3.6k xp | 3 posts

Como o novo component identifica cada parametro?

No novo component existem os parametros recebidos pela funcao (children, href). Nao entendi como foi linkado corretamente quando digitado os valores no html. Tipo, como foi entendido que "Ir para a FAQ." seria o valor para {children} e "/" o valor para {href}?

export default function Link({ children, href, ...props }) {
  return (
    <NextLink href={href}>
      <a {...props}>{children}</a>
    </NextLink>
  );
}

export default function HomePage() {
  return (
    <h1>Home page</h1>
    <Link href= "/" >
          <a>Ir para a FAQ.</a>
    </Link>
  );
});
4 respostas
por Mike de Sousa
| 1415k xp | 2578 posts
Alura Scuba Team Suporte Educacional

Olá, Victor, como vai?

Quando você passa atributos para um componente, eles são automaticamente mapeados para os parâmetros correspondentes na função do componente. No exemplo, quando você usa:

<Link href="/">Ir para a home.</Link>

É interpretado como:

  • href="/" → passa como prop href
  • "Ir para a home." → passa como prop children (conteúdo interno do componente)

No JSX, qualquer conteúdo dentro da abertura e fechamento de um componente (<Link>conteúdo</Link>) é atribuído automaticamente à prop children. Da mesma forma, href="/" define a prop href, pois corresponde ao nome do parâmetro recebido pela função.

Por exemplo, se você usasse:

<Link href="/sobre">Clique para sobre</Link>
  • href seria "/sobre"
  • children seria "Clique para sobre"

O fórum está à disposição caso queira explorar mais sobre composição de componentes ou o funcionamento do Next.js.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Victor Specke Manoel
| 3.6k xp | 3 posts

Olá Mike!

Ok. Neste caso aqui até faz sentido, mas em um componente qualquer que tivesse mais parâmetros?

No caso do Angular, por exemplo, usa-se @Input() para identificar os parâmetros que chegam no componente através do HTML. Existe uma forma de especificar mais literalmente no Next?

Talvez ainda seja muito precoce eu perguntar isso sem me aprofundar nos estudos aqui. Apenas comecei a tentar entender o Next.

solução!
por Mike de Sousa
| 1415k xp | 2578 posts
Alura Scuba Team Suporte Educacional

Oi, Victor.

No Next (e no React de forma geral), os parâmetros passados para um componente são recebidos como um objeto props, sem a necessidade de decoradores como o @Input() do Angular. Quando você declara um componente com ({ children, href, ...props }), o JavaScript desestrutura os valores que foram passados para ele.

Se um componente tiver mais parâmetros, todos serão recebidos como propriedades no objeto props. O Next não exige uma anotação explícita como @Input(), pois a tipagem das props pode ser feita com TypeScript caso queira mais controle.

por Victor Specke Manoel
| 3.6k xp | 3 posts

Obrigado Mike.