I use the VKUI library for React. If I create a component that will output EPIC (for example, with one page):

Return (
 & lt; Epic ActiveStory = {ActiveStory} Tabbar = {
  & lt; tabbar & gt;
   & lt; tabbaritem
    ONCLICK = {() = & gt; SetActiveStory ('Home')}
    SELECTED = {ActiveStory === 'Home'}
    Data-Story = "Home"
    Text = "Home"
   & gt; & lt; icon24services / & gt; & lt; / tabbaritem & gt;
  & lt; / Tabbar & gt;
 } & gt;
  // ** here content **
 & lt; / Epic & gt;
)

If you contact this code:

& lt; view id = "home" activepanel = "home" & gt;
 & lt; panel id = "home" & gt;
  & lt; panelheader & gt; Home & LT; / PanelHeader & GT;
  & lt; userinfo / & gt;
 & lt; / panel & gt;
& lt; / view & gt;

That everything is finely displayed. But, if this code is made in a separate component, and to substitute this most component here, then nothing works

app.js

Return (
 & lt; Epic ActiveStory = {ActiveStory} Tabbar = {
  & lt; tabbar & gt;
   & lt; tabbaritem
    ONCLICK = {() = & gt; SetActiveStory ('Home')}
    SELECTED = {ActiveStory === 'Home'}
    Data-Story = "Home"
    Text = "Home"
   & gt; & lt; icon24services / & gt; & lt; / tabbaritem & gt;
  & lt; / Tabbar & gt;
 } & gt;
  & lt; HOME / & GT;
 & lt; / Epic & gt;
)

home.js

const home = () = & gt; {
 Return (
  & lt; view id = "home" ActivePanel = "Home" & gt;
   & lt; panel id = "home" & gt;
    & lt; panelheader & gt; Home & LT; / PanelHeader & GT;
    & lt; userinfo / & gt;
   & lt; / panel & gt;
  & lt; / view & gt;
 )
}
Export Default Home.

In the end, we get an empty screen. How to fix it? I do not want to write a large code in one component, because it is much better to split it into different components.

Answer 1

ID Pass your induced & lt; home id = "home" / & gt;