Как в react сделать dot-notation?

Question

[repcolding]

У меня есть компонент, это dropdown. Как правильно оформить dot-notation для него? Как сделал сейчас:

export { Panel } from '@/components/ui/DropDownUi/Panel/Panel.jsx'
export { SelectList } from '@/components/ui/DropDownUi/SelectList/SelectList.jsx'
export { Item } from '@/components/ui/DropDownUi/Item/Item.jsx'

const DropDownUi = (props) => {/* ... */}

export { DropDownUi }

Но при использовании приходиться делать вот так:

import * as DropDownUi from '@/components/ui/DropDownUi/DropDownUi.jsx'

<DropDownUi.DropDownUi> // <---------
  <DropDownUi.Panel />
</DropDownUi.DropDownUi>

Можно ли сделать так, чтобы не приходилось писать <DropDownUi.DropDownUi>?

P.S: Такая запись отключает автокомплит в IDE, в отличии от export, хочется автокомплит оставить

DropDownUi.Panel = Panel
DropDownUi.SelectList = SelectList

Comments

[Lynn «Кофеман»]

А где пример использования (import или require или что там)?

[repcolding]

Lynn «Кофеман», Обновил ответ, спасибо за замечание! Продублирую еще и сюда:

import * as DropDownUi from '@/components/ui/DropDownUi/DropDownUi.jsx'

[WbICHA]

export default?

[repcolding]

WbICHA, Нет, не вышло. Пробовал всякими разными способами. Жалко ts нет, сделал бы как в P.S))

[WbICHA]

repcolding, что не вышло? Дефолтный экспорт прописать?

[WbICHA]

repcolding,

Жалко ts нет

Так поставь.

[repcolding]

WbICHA

что не вышло? Дефолтный экспорт прописать?

- Ошибки компиляции, что логично, если я буду экспортировать из файла два вида экспортов:

export { Panel } from '@/components/ui/DropDownUi/Panel/Panel.jsx'
export { SelectList } from '@/components/ui/DropDownUi/SelectList/SelectList.jsx'
export { Item } from '@/components/ui/DropDownUi/Item/Item.jsx'

const DropDownUi = (props) => {/* ... */}

export default DropDownUi

То подтянуть все импорты в одно значение не получится:

// Работает
import DropDownUi, { Panel, SelectList, Item } from '@/components/ui/DropDownUi'

// Не работает
import * as DropDownUi from '@/components/ui/DropDownUi'

Скорее всего, я что-то не правильно делаю, и не понимаю даже что...

Так поставь

Так и сделал, самое разумное и верное, по миллиону пунктов. Спасибо!

[WbICHA]

repcolding, раз у тебя теперь есть тс, то в чём проблема сделать так?

DropDownUi.Panel = Panel
DropDownUi.SelectList = SelectList

[repcolding]

WbICHA, Я так и сделал! Просто раскрыл тему не много без TS. Так что вопрос закрыт можно сказать)

[repcolding]

WbICHA, Прошу прощения за настойчивость. А вы используете dot-notation? Я просто не знаю в ходу ли это, либо нет

[WbICHA]

repcolding, скорее нет, чем да, но это редкие кейсы, где это имеет реальный смысл. К примеру, Ant Design использует это и с кастомной типизацией очень даже удобно.
Если это имеет смысл и этим удобно пользоваться, то почему бы и нет?