Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

205
Visualizações
Desestructuración en los accesorios de React, no entiendo {...{ [resourceName]: item }} dentro de los accesorios

Encontré este código y no entiendo {...{ [resourceName]: item }} dentro de los accesorios dentro del archivo RegularList.js .

Tengo dos preguntas:

  1. ¿Quién no debería, en cuanto a la sintaxis, escribir sth.=sth .
  2. ¿Qué objeto es este {...{ [resourceName]: item }} tratando de copiar aquí?

Aquí está mi código:

RegularList.js

 export const RegularList = ({ items, resourceName, itemComponent: ItemComponent, }) => { return ( <> {items.map((item, i) => ( <ItemComponent key={i} {...{ [resourceName]: item }} /> ))} </> ); };

Aplicación.js

 const products = [{ name: 'Flat-Screen TV', price: '$300', description: 'Huge LCD screen, a great deal', rating: 4.5, }, { name: 'Basketball', price: '$10', description: 'Just like the pros use', rating: 3.8, }, { name: 'Running Shoes', price: '$120', description: 'State-of-the-art technology for optimum running', rating: 4.2, }]; <RegularList items={products} resourceName="product" itemComponent={SmallProductListItem} />

SmallProductListItem.js

 export const SmallProductListItem = ({ product }) => { const { name, price } = product; return ( <h3>{name} - {price}</h3> ); }
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

{ [resourceName]: item }

Está creando un nuevo objeto con una clave dinámica resourceName

 ...{}

Es operador de propagación.

Entonces, lo que se logra aquí es pasar un nombre de resourceName prop dinámico a su componente.

Por ejemplo, si resourceName === "foo" su ItemComponent tendrá el apoyo foo :

 <ItemComponent foo={item} />
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda