Tengo un componente que usa otro componente como renderizador. Sin embargo, React no me permite usar ganchos en el componente del renderizador ya que arroja el siguiente error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.Aquí hay un ejemplo de lo que tengo en mi componente de visualización, que es un límite de error :
class DisplayComponent extends Component { // ... render() { const { rendererComponent } = this.props; return rendererComponent({ enabled: true, name: 'hello-world' }) } } Como puede ver, el accesorio rendererComponent en DisplayComponent se llama como una función aunque es un componente y le paso algunos accesorios como lo llamo de esta manera.
Ahora, en mi otro archivo donde uso DisplayComponent , se ve así:
const RendererComponent = (props) => { const { enabled, name } = props; const [testState, setTestState] = useState(); // Error: Invalid hook call useEffect(() => { // Error: Invalid hook call }, [testState]); return ( <div>{name} - {enabled}</div> ) } const App = () => { return ( <DisplayComponent rendererComponent={RendererComponent} /> ) } Aquí está la clave. Por alguna razón, no puedo usar ganchos como useEffect , useState , etc. en RendererComponent . Si lo uso, React arrojará el error que mencioné anteriormente de que el enlace no es válido. Pero me gustaría tener algo de lógica que requiera ganchos en RendererComponent .
¿Cómo puedo usar ganchos para tener estados y efectos en un componente que se llama como lo hice?
Está realizando una llamada de función en lugar de montar el componente, esas son dos llamadas y sintaxis diferentes, cámbielo a:
class DisplayComponent extends Component { render() { // Custom component must be Capitalized const { rendererComponent: RenderedComponent } = this.props; return <RenderedComponent enabled name="hello-world" />; } } // Notice that the JSX is transpiled to React.createElement(RenderedComponent, { enabled: true, name: "hello-world" }); En React, solo puede montar un componente llamando a su API con React.createElement (JSX es su sintaxis de azúcar), mientras que una llamada de función simple es puramente JS que no activa la API de React, es decir, no registrará el componente en el árbol de componentes. . Por lo tanto, la implementación interna como ganchos no tiene sentido, perderá el estado en cada renderizado (no se activará la Reconciliación).