Tengo la siguiente estructura de directorios
- common | |--- Component1 | | | |--- index.js | |--- Component1.tsx | |--- Component1.scss | |--- Component2.tsx | En index.js y Compoennt1.tsx de Component1, exporto el valor predeterminado
Componente1/index.js
export { default as Component1 } from './Component1'Componente1/Componente1.tsx
const Component1 = () => { code... } export default Component1 y en Component2.tsx quiero importar Component1.tsx a través de la importación predeterminada. Sin embargo, se queja de que "no hay exportación predeterminada en /Component1/index". Creo que el directorio /Compoennt1 está exportando Component1.tsx de forma predeterminada, pero no funciona
Component2.tsx
// doesn't work import Component1 from './Component1' // both works import { Component1 } from './Component1' or import Component1 from './Component1/Component1'¿Alguien puede explicar por qué no puedo exportar/importar por defecto cuando es a través de una carpeta o es así como funcionan las importaciones/exportaciones?
Aquí, es una exportación con nombre (llamado Component1 ), no una exportación predeterminada:
export { default as Component1 } from './Component1'es por eso que importarlo a través de importaciones con nombre funciona aquí:
import { Component1 } from './Component1' Si desea convertirlo en la exportación predeterminada para Component1/index.js , necesita
export { default as default} from './Component1'Personalmente, me gusta ser coherente cuando escribo código; es bueno no tener que intentar recordar, para cada módulo , "¿Exportó este módulo un valor predeterminado o algo así?" En un proyecto determinado, puede que le resulte más fácil usar exportaciones predeterminadas en todas partes, o exportaciones con nombre en todas partes, pero no mezclarlas.