Nested <RootElement>?

[breezewish]

Usually there is a common layout for most of pages so I extracted a single component called Layout and every page inherits a BasePage which includes <Layout>. Both BasePage and derived page needs to load their own data.

However I found out components in the inner <RootElement> cannot get properties correctly.

BasePage:

getElement() {
  return (
    <RootContainer className="layout-container">
      <RootElement when={this.sessionPromise}>
        <Layout>
          {this.getLayoutContentElements()}
        </Layout>
      </RootElement>
    </RootContainer>
  );
}

A sample demo page:

export default class DemoPage extends BasePage {
  handleRoute(next) {
    super.handleRoute();
    this.data = API.demo.all().then(d => ({ demoData: d.body }));
    return next();
  }
  getLayoutContentElements() {
    return (
      <RootElement when={this.data}>
        <InnerComponent />
      </RootElement>
    );
  }
}

Could you show me some solutions for this? Thanks a lot!

[mkozhukharenko]

same question, can anybody answer?