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

В итоге получаем пустой экран. Как это пофиксить? Не хочется писать большой код в одном компоненте, ведь куда лучше разбить его на разные компоненты.


Ответы (1 шт):

Автор решения: Simbik

id передайте своему вызванному компоненту <Home id="home" />

→ Ссылка