Estoy tratando de crear una aplicación de reacción para demostrar el funcionamiento de HOC en componentes funcionales. Tengo dos escenarios en los que un botón y un encabezado muestran la cantidad de clics realizados en el botón y los movimientos del mouse sobre el encabezado con el mismo código internamente. Sin embargo, me sale el error como se mencionó. El error explica que la regla del gancho está rota. Pude ver que usar ganchos dentro de componentes no funcionales es la forma incorrecta. Solo quería saber si es posible usar HOC que envuelve componentes funcionales. Además, si es posible envolver componentes funcionales dentro de un HOC, ¿dónde cambio mi código?
Aquí está mi código HOC
import React, { useState } from "react"; const Count = (Component) => { const [count, setCount] = useState(0); const incrementHandler = (e) => { setCount((prevState) => { return prevState + 1; }); }; return <Component count={count} incrementHandler={incrementHandler} />; }; export default Count;Aquí está mi componente ClickCounter
import React from "react"; import Count from "../HOC/CountHOC"; const ClickCounter = (props) => { return ( <div> <button onClick={props.incrementHandler}> Clicked {props.count} times </button> </div> ); }; export default Count(ClickCounter);Aquí está mi código HoverCounter
import React from "react"; import Count from "../HOC/CountHOC"; const HoverCounter = (props) => { return ( <div> <h1 onMouseOver={props.incrementHandler}>Hovered {props.count} times</h1> </div> ); }; export default Count(HoverCounter);Sí, puede envolver componentes de funciones de la misma manera que puede envolver componentes class ; el HOC no sabe ni le importa de qué tipo lo das. Si observa los ejemplos de HOC en la documentación , notará que todos devuelven funciones (en el caso de esa página, funciones de constructor):
// This function takes a component... function withSubscription(WrappedComponent, selectData) { // ...and returns another component... return class extends React.Component { // ... }; }
El resultado de una expresión de class es la función constructora de la clase. Una función HOC devuelve el nuevo componente contenedor que crea. Su función devuelve el resultado de React.createElement en su lugar.
Debe devolver el componente mejorado (ya sea una función o un componente de class ), en lugar de escribir la función HOC en sí como un componente:
const withCount = (Component) => { return function(props) { const [count, setCount] = useState(0); const incrementHandler = (e) => { setCount((prevState) => { return prevState + 1; }); }; return <Component {...props} count={count} incrementHandler={incrementHandler} />; }; };Los cambios que hice allí son:
Count a withCount , ya que no es un componente (simple), es un HOC.Ejemplo en vivo:
const { useState } = React; const withCount = (Component) => { return function(props) { const [count, setCount] = useState(0); const incrementHandler = (e) => { setCount((prevState) => { return prevState + 1; }); }; return <Component {...props} count={count} incrementHandler={incrementHandler} />; }; }; const ClickCounter = (props) => { return ( <div> <button onClick={props.incrementHandler}> Clicked {props.count} times </button> </div> ); }; const EnhancedClickCounter = withCount(ClickCounter); ReactDOM.render(<EnhancedClickCounter />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>