Quiero crear una lista de funcionalidades a las que pueda acceder fácilmente desde cualquier lugar de mi aplicación simplemente importando el componente. Así es como se ve mi componente:
funcionalidades.componente.jsx
import { AES } from "crypto-js" import { useContext, useState } from "react" import { ConfigurationContext } from "../env" const {configurationState} = useContext(ConfigurationContext); const Functionalities = { encrypt: (info) => AES.encrypt(info, configurationState.application.key).toString(); } export default FunctionalitiesEl problema al que me enfrento ahora es que no puedo usar ningún valor de contexto, ya que provocaría un error. ¿Hay alguna manera de implementar "useContext" en esto?
Puede llamar a un Hook de React solo dentro de un componente de React o dentro de un hook personalizado, es una de las reglas de los hooks .
Lo mejor que puede hacer, si necesita compartir funcionalidades comunes, es crear un conjunto de ganchos personalizados.
import { AES } from "crypto-js" import { useContext } from "react" import { ConfigurationContext } from "../env" const Functionalities = { useEncrypt: () => { const { configurationState } = useContext(ConfigurationContext); return (info) => AES.encrypt(info, configurationState.application.key).toString(); } }; export default Functionalities; Ejemplo de uso (recuerde siempre llamar a useContext dentro de Context.Provider ).
function EncryptComponent({info}) { const encrypt = Functionalities.useEncrypt(); return <button onClick={() => encrypt(info)}>Encrypt</button> }Proporciono un ejemplo de CodeSandbox que muestra cómo hacerlo.