Подскажите можно ли в react реализовать следующий подход:
у меня есть базовый компонент MyBaseComponent
, который я оформил как абстрактный класс (задал метод _base_render()
который в базовом выбрасывает исключение)
от MyBaseComponent
наследую свой компонент MyComponent
, который использует очень много других моих компонентов, которые взаимодействуют с базовым классом
_base_render()
{
return (
<MyElement1>
<MyElement2>
<MyElement3>
<MyElement4>
</MyElement1>
);
}
и т.д.
Сейчас мне приходится в .js файле, где описан MyComponent
(или любой другой компонент - наследник MyBaseComponent
) делать много импортов
import MyBaseComponent from './MyBaseComponent'
import MyElement1 from './MyElement1'
import MyElement2 from './MyElement2'
import MyElement3 from './MyElement3'
import MyElement4 from './MyElement4'
Что как-то несколько отягощает код.
Подскажите а есть ли какой-то способ избавиться от этих импортов, т.е. чтобы мне хватало только одного импорта
import MyBaseComponent from './MyBaseComponent'
и я получал доступ ко всем необходимым компонентам, т.е.
1) чтобы сделать что-то такое:
_base_render()
{
return (
<MyBaseComponent.MyElement1>
<MyBaseComponent.MyElement2>
<MyBaseComponent.MyElement3>
<MyBaseComponent.MyElement4>
</MyBaseComponent.MyElement1>
);
}
2) аналогично п.1, но без MyBaseComponent.
Line 20: 'MyElement1' is not defined react/jsx-no-undef Search for the keywords to learn more about each error.