• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

188
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.

about 3 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

about 3 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>
about 3 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>
about 3 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 Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error