0

Estou realizado alguns teste e algum lugar eu vi que estavam utilizando { ...props } no parâmetro do componente. Qual a diferença de usar { ...props } de somente props?

export default function Botao(props) { ... }
export default function Botao({ ...props }) { ... }
5
  • 2
    pt.stackoverflow.com/q/111497/112052
    – hkotsubo
    Commented 5/07/2021 às 20:55
  • 2
    Não faz muito sentido utilizar parâmetros rest quando se trata de uma função que será utilizada para componentes do React, já que elas não são variádicas. Commented 5/07/2021 às 21:25
  • Você quis dizer Botao({...props}), certo? Commented 6/07/2021 às 10:37
  • @RafaelTavares isso mesmo, mas a minha dúvida foi respondida já. Obrigado Commented 6/07/2021 às 11:25
  • @ChristianViana caso a dúvida tenha sido sanada, aceita a resposta como "Melhor resposta". Commented 6/07/2021 às 20:55

1 Resposta 1

3

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .