Crear un HOC (componente de orden superior) usando React

Tiempo de lectura: 2 minutos

En React, este tipo de componente se conoce como un «componente de orden superior» o «HOC» (Higher Order Component).

Un HOC es una función que toma un componente y devuelve otro componente que generalmente proporciona funcionalidad adicional al componente original.

Supongamos que queremos crear un HOC llamado WrapperComponent que envuelva a otro componente llamado WrappedComponent y le proporcione alguna funcionalidad adicional.

Por ejemplo, podríamos querer proporcionar un borde rojo alrededor de WrappedComponent. Aquí tienes cómo hacerlo:

import React from 'react';

// Definimos nuestro HOC
const WrapperComponent = (WrappedComponent) => {
  // Retorna un nuevo componente
  return class extends React.Component {
    render() {
      // Aquí podemos agregar cualquier lógica adicional antes o después de renderizar el componente envuelto
      return (
        <div style={{ border: '2px solid red', padding: '10px' }}>
          {/* Renderizamos el componente envuelto y pasamos todas las props */}
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  };
};

// Creamos un componente que queremos envolver
const MyComponent = (props) => {
  return (
    <div>
      <h2>Componente Envuelto</h2>
      <p>Propiedad: {props.propiedad}</p>
    </div>
  );
};

// Envolver MyComponent con nuestro HOC
const WrappedMyComponent = WrapperComponent(MyComponent);

// Usamos WrappedMyComponent en nuestra aplicación
const App = () => {
  return (
    <div>
      <h1>Aplicación con Componente Envuelto</h1>
      <WrappedMyComponent propiedad="¡Hola!" />
    </div>
  );
};

export default App;

En este ejemplo, WrapperComponent es una función que toma WrappedComponent como argumento y devuelve un nuevo componente que envuelve WrappedComponent con un borde rojo. Luego, usamos WrapperComponent para envolver nuestro componente MyComponent y creamos WrappedMyComponent.

Finalmente, usamos WrappedMyComponent en nuestra aplicación.