Me gustaría poder importar cualquier componente en el directorio de components , directamente desde el directorio de components .
La estructura de directorios actual es:
src ├── components │ ├── Camera.tsx │ ├── Keyboard.tsx │ └── index.ts └── screens └── App.tsxY me gustaría poder importar de la siguiente manera:
// src/screens/App.tsx import { Keyboard } from '../components' La primera opción es, obviamente, mantener una larga lista de exportaciones en src/components/index.ts :
// src/components/index.ts export { Camera } from './Camera' export { Keyboard } from './Keyboard' Sin embargo, esto es engorroso de mantener. ¿Hay alguna manera de usar glob y el objeto de exportación para exportar automáticamente todos los componentes, o posiblemente de otra manera todos juntos?
En este caso, debe crear un archivo index.ts en su directorio de components .
Primero, importe todos sus componentes en él:
import Camera from './Camera' import Keyboard from './Keyboard' // and so on for other componentsAhora, exporta todos ellos:
import Camera from './Camera' import Keyboard from './Keyboard' export Camera; export Keyboard;Esto se puede simplificar de esta manera:
export Camera from './Camera' export Keyboard from './Keyboard' Finalmente, use la ruta './components' para importar la Camera y otros componentes también:
import { Keyboard, Camera } from '../components' Nota 1: El uso de este tipo de imports/exports causará problemas con la división del código o el uso de métodos Suspense/Lazy .
Nota 2: la depuración será más difícil con un archivo de índice general.
Podrías lograr eso editando tu index.ts para que sea así
src ├── components │ ├── Camera.tsx │ ├── Keyboard.tsx │ └── index.ts <=== this file └── screens └── App.tsx export * from './Camera' export * from './Keyboard'