A menudo uso HOC para proporcionar funcionalidad adicional a un componente React existente, lo cual es bastante sencillo:

import Component from '/path/to/Component';
import higherOrderComponent from '/path/to/higherOrderComponent';

const EnhancedComponent = higherOrderComponent(Component);

Sin embargo, necesito envolver un HTML input simple, que no existe como componente independiente de React. Lo intenté

const EnhancedInput = higherOrderComponent(<input />);

Y obtuve el siguiente error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

¿Cómo puedo pasar correctamente la entrada?

6
ericgio 18 feb. 2018 a las 04:48

2 respuestas

La mejor respuesta

Pase el nombre de cadena del elemento HTML que desea envolver:

const EnhancedInput = higherOrderComponent('input');

El error me dio una pista de lo que tenía que hacer y tenía más sentido al analizar lo que está haciendo JSX. <input /> es simplemente azúcar sintáctico JSX para { {X1}}.

Si el HOC se parece a esto:

const higherOrderComponent = (Component) => {
  return class extends React.Component {
    render() {
      return (
        <Component {...} />
      );
    }
  }
};

Entonces el método render finalmente regresa

React.createElement(Component, {...});

Por lo tanto, pasar la cadena 'input' al HOC significa que devolverá React.createElement('input', {...});, que es lo mismo que <input /> como se afirmó anteriormente.

5
ericgio 22 ago. 2018 a las 07:46

Otra solución es utilizar una función que devuelva el HTML que desea.

const EnhancedComponent = higherOrderComponent(()=><input />)

4
fabioDMFerreira 28 may. 2018 a las 10:17