Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

193
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!