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