No primeiro exemplo você recebe o objeto - contendo todos os atributos passados.
e.g.
export default function Button(props) {
return <button style={{ backgroundColor: props.backgroundColor}>{props.label}</button>
}
<Button backgroundColor="red" label="Click here" />
No segundo exemplo você pode usar destructuring assignment
para "destruturar" os atributos desejados e posteriormente usamos o spread operator
para atribuir os demais atributos a props
.
e.g.
export default function Button({ label, backgroundColor, ...props }) {
return <button style={{ backgroundColor }} {...props}>{label}</button>
}
<Button backgroundColor="red" label="Click here" onClick={() => alert("Pressed")} />
No exemplo acima, você destruturou os atributos label
e backgroundColor
, já os demais serão atribuídos a props
; também podemos usar o spread operator
para passar tudo que está em props
para o elemento button
.
Botao({...props})
, certo?