1.7 KiB
1.7 KiB
title | localeTitle |
---|---|
Higher-Order Components | Componentes de ordem superior |
Componentes de ordem superior
Em React, um componente de ordem mais alta (HOC) é uma função que usa um componente e retorna um novo componente. Os programadores usam HOCs para obter a reutilização lógica de componentes .
Se você já usou o Redux's connect
, você já trabalhou com componentes de alta ordem.
A ideia principal é:
const EnhancedComponent = enhance(WrappedComponent);
Onde:
enhance
é o componente de ordem superior;WrappedComponent
é o componente que você deseja aprimorar; eEnhancedComponent
é o novo componente criado.
Este poderia ser o corpo da enhance
HOC:
function enhance(WrappedComponent) {
return class extends React.Component {
render() {
const extraProp = 'This is an injected prop!';
return (
<div className="Wrapper">
<WrappedComponent
{...this.props}
extraProp={extraProp}
/>
</div>
);
}
}
}
Nesse caso, enhance
retorna uma classe anônima que estende React.Component
. Este novo componente está fazendo três coisas simples:
- Renderizando o
WrappedComponent
dentro de um elementodiv
; - Passando seus próprios props para o
WrappedComponent
; e - Injetando um suporte extra para o
WrappedComponent
.
Os HOCs são apenas um padrão que usa o poder da natureza composicional de React. Eles adicionam recursos a um componente . Há muito mais coisas que você pode fazer com eles!