Как я могу использовать ComponentName.js вместо index.js при импорте компонента React (из каталога структуры проектирования Atomic) - PullRequest
Новая
       25

Как я могу использовать ComponentName.js вместо index.js при импорте компонента React (из каталога структуры проектирования Atomic)

0 голосов
/ 27 мая 2019

Я использую Гэтсби (React) для моего проекта. Я использую Атомный дизайн структура папок, например: 

src/components/Organisms/Header

В этой папке мне нравится иметь: 

src/components/Organisms/Header/header.js
src/components/Organisms/Header/header.module.scss

Как я могу импортировать header.js изнутри src/components/layout.js как: 

import Header from '@components/Organisms/Header'

вместо: 

import Header from '@components/Organisms/Header/header'

Обновление:

Мне удалось сделать это:

  • добавление файла index.js к src/components/Organisms/Header/
  • и export { default } from './header'; в index.js

Но это лучшие практики?

1 Ответ

1 голос
/ 29 мая 2019

У вас есть несколько вариантов здесь. Со всем этим вы импортировали бы src/components/Header.

1. Квартира без каталога компонентов (мои предпочтения): 

src
└── components
    ├── Header.js
    └── header.module.css

Преимущества

  • Менее бессмысленное вложение
  • В вашем редакторе нет открытых / сбивающих с толку имен файлов (например, указатель)
  • Легко следить за импортом и экспортом

1020 * Недостатки *

  • Нигде нет одноразовых ресурсов и субкомпонентов

2. Смежный компонент и каталог ресурсов (в стиле Ruby): 

src
└── components
    ├── Header
    │   ├── header.module.css
    │   └── logo.png
    └── Header.js

Преимущества

  • Ресурсы и подкомпоненты хранятся вместе
  • В вашем редакторе нет открытых / сбивающих с толку имен файлов (например, указатель)
  • Легко следить за импортом и экспортом

Недостатки

  • Компонент не смежен с ресурсами, поэтому для импорта требуется префикс ./Header/
  • В зависимости от сортировки каталог ресурсов может не отображаться в списке рядом с компонентом

3. С индексом каталога, который экспортирует Header: 

src
└── components
    └── Header
        ├── Header.js
        ├── header.module.css
        ├── index.js
        └── logo.png

Преимущества

  • Компонент и ресурсы хранятся вместе
  • Сортировка не имеет значения

Недостатки

  • Конфликтующие / сбивающие с толку имена файлов, открытые в вашем редакторе (например, указатель)
  • Запутывает импорт и экспорт, может вызвать трудно диагностируемые ошибки
  • Дополнительная работа для каждого компонента
...