VKUI - Компонент Epic не отображает содержимое, если оно находится в другом компоненте
Использую библиотеку VKUI для React. Если я создам компонент, который будет выводить Epic (для примера, с одной страницой):
return (
<Epic activeStory={activeStory} tabbar={
<Tabbar>
<TabbarItem
onClick={() => setActiveStory('home')}
selected={activeStory === 'home'}
data-story="home"
text="Главная"
><Icon24Services /></TabbarItem>
</Tabbar>
}>
// **ТУТ СОДЕРЖАНИЕ**
</Epic>
)
Если в содержание подствить этот код:
<View id="home" activePanel="home">
<Panel id="home">
<PanelHeader>Главная</PanelHeader>
<UserInfo />
</Panel>
</View>
То всё отлично отображается. Но, если этот код вынести в отдельный компонент, а сюда подставить этот самый компонент, то ничего не работает
App.js
return (
<Epic activeStory={activeStory} tabbar={
<Tabbar>
<TabbarItem
onClick={() => setActiveStory('home')}
selected={activeStory === 'home'}
data-story="home"
text="Главная"
><Icon24Services /></TabbarItem>
</Tabbar>
}>
<Home />
</Epic>
)
Home.js
const Home = () => {
return (
<View id="home" activePanel="home">
<Panel id="home">
<PanelHeader>Главная</PanelHeader>
<UserInfo />
</Panel>
</View>
)
}
export default Home
В итоге получаем пустой экран. Как это пофиксить? Не хочется писать большой код в одном компоненте, ведь куда лучше разбить его на разные компоненты.