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

212
Views
¿Cómo pasar todos los demás accesorios a la clase de reacción?

Digamos que tengo 3 accesorios que mi componente basado en clase requiere e implementa, es decir

 <Component propOne={this.props.one} propTwo={this.props.two}> {this.props.children} </Component>

¿Cómo pasaría otros accesorios que originalmente no esperaba, pero que alguien más que usa mi componente querría usar?

yo estaba pensando

 <Component propOne={this.props.one} propTwo={this.props.two} {...this.props} > {this.props.children} </Component>

Pero me preocupa la duplicación de accesorios.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Usar sintaxis extendida :

 const {propOne, propTwo, ...leftOver} = this.props; // `leftOver` contains everything except `propOne` and `propTwo`

Entonces tu ejemplo se convertiría en:

 const { propOne, propTwo, children, ...props } = this.props; <Component propOne={propOne} propTwo={propTwo} {...props}> {children} </Component>

La sintaxis extendida ( ... ) permite que un iterable, como una expresión de matriz o una cadena, se expanda en lugares donde se esperan cero o más argumentos (para llamadas a funciones) o elementos (para literales de matriz), o se expande una expresión de objeto en lugares donde se esperan cero o más pares clave-valor (para objetos literales).

Fuente: MDN

over 4 years ago · Santiago Trujillo Report

0

El operador de propagación es excelente, pero me sorprendió no haberlo descubierto en los tutoriales, y luego me tomó una eternidad encontrar una fuente confiable que lo describiera. En caso de que estés dudando de cómo funciona, aquí están los detalles en el POD oficial de ReactJS, de un pequeño artículo llamado JSX In Depth ...

Si ya tiene props como objeto y desea pasarlo en JSX, puede usar ... como un operador de "spread" para pasar todo el objeto props. Estos dos componentes son equivalentes:

 return <Greeting firstName="Ben" lastName="Hector" />; } function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />; }```

Y, por supuesto, para tu caso, donde quieres pasar solo a algunos de los niños...

 const Button = props => { const { kind, ...other } = props; const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton"; return <button className={className} {...other} />; };

En el ejemplo anterior, el tipo prop se consume de forma segura y no se pasa al elemento en el DOM. Todos los demás accesorios se pasan a través del ...otro objeto, lo que hace que este componente sea realmente flexible. Puede ver que pasa un onClick y accesorios para niños.

Fuente: ReactJS.org: JSX en profundidad, Especificación del tipo de elemento React, Atributos extendidos .

Para tu caso específico...

 const {propOne, propTwo, ...newChildProps} = this.props; <Component propOne={this.props.one} propTwo={this.props.two} {...newChildProps} >{children}</Component>
over 4 years ago · Santiago Trujillo Report

0

Filtrarlos?

 function without(props, keys) { return Object.keys(props) .filter((key) => keys.indexOf(key) !== -1) .reduce((retVal, key) => { retVal[key] = props[key]; }, {}); } <Component propOne={this.props.one} propTwo={this.props.two} {...without(this.props, ['one', 'two'])} > {this.props.children} </Component>
over 4 years ago · Santiago Trujillo 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!