Al trabajar en ReactJS, me encontré con un problema en el que el programa no reconoce las funciones importadas que no se utilizan y creo que no se agregan a la ventana.
En mi caso, estoy tratando de poder importar funciones de otros archivos y luego llamarlas por nombre de cadena.
Ex)
import {myFunction} from '../otherFile'; functionNameString = 'myFunction' window[functionNameString]() //call function by it's string name //ERROR: window[functionNameString] is not a functionSin cambiar mi sintaxis anterior, encontré dos formas de resolver esto:
window[functionNameString]()window.myFunction = myFunctionEstoy tratando de evitar el primer caso para mantener este archivo más corto, pero tampoco entiendo por qué necesito hacer la asignación explícita de la función a la ventana como se muestra en el segundo caso (y por qué definir la función en el mismo archivo no necesita esto)
En general, mi pregunta es ¿cómo puedo evitar esta asignación explícita y hacer que estas funciones importadas se puedan llamar desde la importación (o en una sintaxis más corta)? Asignar así está bien para una función o dos, pero estoy pensando en importar 15 funciones de este otro archivo, lo que complica las cosas al trabajar de esta manera. ¡Gracias!
Los módulos tienen su propio alcance, no están en el alcance global y las importaciones se crean como enlaces dentro del alcance del módulo, no globales. Ese es al menos la mitad del objetivo de los módulos: no volver a hacer que todo sea global.
En general, mi pregunta es ¿cómo puedo evitar esta asignación explícita y hacer que se puedan llamar estas funciones importadas?
Son llamables. myFunction() llamará a su función en su código de ejemplo. No hay razón alguna para que window esté involucrada.
Si necesita referirse a ellos por un nombre en una cadena por algún motivo, puede ponerlos en un objeto:
const functions = { myFunction, // ... }; Entonces functions[functionNameString]() funcionarán.