Hay algo común que a veces todos hacemos. Envuelva elementos dom en componentes personalizados
<CustomComponet id="abc" title="abc" nonDomProp="abc" ...andsoforth />
El componente personalizado en este ejemplo envuelve el button
que tiene las propiedades id
y title
pero no nonDomProp
, por lo que recibo una advertencia que tiene sentido porque nonDomProp no existe en el elemento DOM del button
envuelto y solo estoy pasando todos los accesorios al elemento DOM del button
con el operador de propagación <button {...props} />
Una forma de resolver esto es pasar manualmente solo los accesorios que usará ese button
, pero me preguntaba si hay una manera de decirle al operador de propagación que use todos los ...props
pasados pero que ignore nonDomProp
.
Intenté hacer una búsqueda en Google y no pude encontrar lo que estaba buscando, así que pensé que tal vez SO me orientaría en la dirección correcta.
Puedes desestructurar el objeto props con esto:
const { nonDomProp, ...propsButton } = props; return( <button {...propsButton} /> )
O directamente desde el argumento de la función CustomComponent :
const CustomComponent = ({ nonDomProp, ...props }) => { ... return( <button {...props} /> ) }
Documentos: https://github.com/tc39/proposal-object-rest-spread#rest-properties