Comments 16
tldr: к js функции можно допихть произвольных свойств. Но идея в контексте компонентов мне понравилась, попробуем.
/** Обратите внимание на импорт, мы залезли во внутренности EventCard и выдернули необходимое. Выглядит это посредственно */
import { ActionBar } from "./shared/components/EventCard/ActionBar";
import { StatusBar } from "./shared/components/EventCard/StatusBar";
В EventCard/index.tsx
можно сделать
export { ActionBar } from "./ActionBar";
export { StatusBar } from "./StatusBar";
И в файле использования уже не так все плохо будет
import { EventCard, ActionBar, StatusBar } from "./shared/components/EventCard";
Именно. В свое время отказался от красивого синтаксиса dot
нотаций, когда одна из подобных фич грузила дополнительную библиотеку. Например, в такой карточке (а она может быть одна на всю страницу) нужно отобразить график.
А здесь начинает ломаться tree-shaking. И даже если мы будем использовать такой компонент без графика (дополнительной библиотекой), она притащится вся и целиком, даже если не используется, получается мертвый код налицо.
Если же вместе с dot-нотацией идет в комплекте babel
-плагин, тогда уже лучше.
export { ActionBar } from "./ActionBar";
export { StatusBar } from "./StatusBar";
А у вас такие переэкспорты "найти определение компонента" не ломают?
Ну и какая же статья про JSX без кода на view.tree, логику работы которого вы тут почти переизобрели:
![](https://habrastorage.org/getpro/habr/upload_files/668/505/7ef/6685057ef7771fc41ad8dc5dcdcdae6f.png)
![](https://habrastorage.org/getpro/habr/upload_files/583/5b1/853/5835b18530761f84ccee7d11adcd3ef1.png)
![](https://habrastorage.org/getpro/habr/upload_files/cb4/7df/671/cb47df67169aa84c2731a519f17c34bd.png)
![](https://habrastorage.org/getpro/habr/upload_files/537/f32/353/537f32353f82604773ea1cbd10b1368c.png)
Ой, я случайно добавил сюда ещё и локализацию с виртуальным рендерингом, простите.
Ой, я случайно добавил сюда ещё и локализацию с виртуальным рендерингом, простите.
Вы молодец, но всё ваше сообщение не в тему и не к месту. Вам уже говорили, что такой подход к рекламе чего-либо может портить впечатление о продукте?)
Очень даже в тему и к месту. Не стоит благодарить меня за источник вдохновения.
Чел, это нечитабельно и никто этим пользоваться не будет
А как вы определяете читабельность?
Примерно так: последний раз я читал про этот синтаксис 2 года назад или никогда. Понимаю ли я сейчас код написанный другим разработчиком. И когда мне надо прочитать код бакенов на go, я понимаю. А какая иконка и откуда поставится в icon \like я не понимаю. И чем отличается title @ \Like и title \Like. Вопросики, escape и / и <= я не понимаю зачем нужны, но могу сдать вид что их нет.
Всё, перечисленное вами, характеризует не язык, а лично вас - нежелание потратить и 5 минут на освоение нового инструмента.
Зачем вы тратите на них время?
Это хороший подход, позволяющий писать чистый и понятный код в декоративном стиле, жали только что типизация react не позволяет родительский компонент обернуть в memo, ждём и надеемся на решение этого неудобства от команды разработчиков react библиотеки
Организация react-компонентов с помощью dot-notation и почему я часто прибегаю именно к этому способу