Несколько экспортов из библиотеки компонентов React

Question

Я пытаюсь создать библиотеку компонентов с несколькими независимыми компонентами. Конечная цель - позволить пользователю сделать что-то вроде

import One from 'component-library' 
import Two from 'component-library'
<One/>
<Two/>

Но я не смог заставить что-либо работать.

Мой текущий макет

src
 -index.tsx
 -components
  -one
  -two

Пример того, как выглядит мой код:

One.tsx

export default class One {
 ...
}

и затем в моем корневом index.tsx

import {default as One} from './components/one/One.tsx'
import {default as Two} from './components/two/Two.tsx'

export {
  one,
  two
}

Это, однако, не работает и возвращает неопределенное значение при попытке импорта, как показано выше. Однако я смог заставить это работать только с одним компонентом и export {default} from './components/one/One.tsx' или просто с помощью import One from '.components/one/One.Tsx', поэтому я думаю, что мой процесс сборки должен быть в порядке. В этом случае компонент отображается правильно в моем другом проекте.

Я также пытался изменить свою структуру и способ импорта, например, используя файл index.tsx в каждом из компонентов и экспортируя / импортируя оттуда. Все они получили то же самое, возвращая неопределенное.

Как правильно их экспортировать, чтобы каждый из них можно было импортировать в сторонний проект?

Answer 1

Как и в Highlander, может быть только один экспорт по умолчанию из данного модуля. Вы можете получить необходимый импорт, импортировав отдельные модули:

import One from 'component-library/One';
import Two from 'component-library/Two';

Или вы можете использовать именованные экспорт и импорт:

import { One, Two } from 'component-library';

Но вы не можете иметь один и тот же импорт, возвращая две разные вещи в зависимости от имени импорта.

Answer 2

Попробуйте с кодом ниже:

import one from './components/one/One.tsx';
import two from './components/two/Two.tsx';

export const One = one;
export const Two = two;

Тогда вы можете использовать его, как показано ниже:

import {One, Two} from 'component-library';

<One/>
<Two/>