Как сделать компонент прямым потомком моих страниц, в то время как он зависит от другого компонента?

Question

У меня есть компонент TermsOfServices с его дочерним компонентом TosButtons, который отображает FAB, которые должны оставаться фиксированными на странице, пока TermsOfServices прокручивается. Рендеринг выглядит следующим образом:

return (
  <div id="TermsOfServices">
    { (!loaded || !currentTermsOfServices) && (
      <div className="TermsOfServices_content text-align-center">
        <Block className="row align-items-stretch">
          <Col><Preloader size={50} /></Col>
        </Block>
      </div>
    )}
    { loaded && currentTermsOfServices && (
      <div className="TermsOfServices_content text-align-center">
        <h1>
          <FormattedMessage id="press_yui_tos_subtitle" values={{ from: currentTosId + 1, to: termsOfServices.length }} />
        </h1>
        <BlockTitle>
          {ReactHtmlParser(
            currentTermsOfServices.title,
            { transform: htmlTransformCallback },
          )}
        </BlockTitle>
        <Block strong inset>
          <div className="tos_content">
            {ReactHtmlParser(
              currentTermsOfServices.html,
              { transform: htmlTransformCallback },
            )}
          </div>
        </Block>
        <TosButtons
          slot="fixed"
          currentTosId={currentTosId}
          termsOfServices={termsOfServices}
          handlePrev={this.handlePrev}
          handleNext={this.handleNext}
        />
      </div>
    )}
  </div>

Я использую framework7, и я задавал вопросы на форуме, но я до сих пор не получил ответ. Из того, что мне сказали, невозможно иметь фиксированные и нефиксированные элементы в одном и том же дочернем компоненте. В начале мои 2 компонента TermsOfServices и TosButtons были объединены в один компонент, и поэтому я разделил их на 2 различных компонента, передав свойство slot = "fixed", как рекомендовано на форуме.

<TosButtons
  slot="fixed"
  currentTosId={currentTosId}
  termsOfServices={termsOfServices}
  handlePrev={this.handlePrev}
  handleNext={this.handleNext}
/>

Но это также не может работать так, потому что TosButtons должно быть прямым потомком моего, а не моего TermsOfServices. Зная, что мой компонент TermsOfServices является дочерним на 2 страницах: Optin и ReadTosPage. Поэтому в идеале мой компонент TosButtons должен быть прямым потомком на моих 2 страницах, а не отображаться в моем TermsOfServices. Мой TosButtons компонент зависит от свойства его родительского TermsOfServices.

Как я могу, исходя из всего этого, сделать мой TosButtons прямым дочерним компонентом моих Optin и ReadTos страниц в то время как в зависимости от TermsOfServices?

Спасибо заранее.