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