Реагируйте - внедренный компонент не соответствует DOM родительской страницы правильно

Question

У меня есть компонент страницы, созданный с помощью React.js.Страница имеет заголовок, содержимое и верхнюю панель инструментов.

Это визуализация страницы компонента:

<Page noSwipeback>
  <Navbar sliding={false}>
    <NavLeft>
      <Link iconIos="f7:menu" iconMd="material:menu" panelOpen="right" />
    </NavLeft>
    <NavTitle sliding>{self.state.title}</NavTitle>
  </Navbar>
  <Toolbar tabbar bottom>
    <Link tabLink="#suggestions" tabLinkActive>{RootScope.t['Suggestions']}</Link>
    <Link tabLink="#soon">{RootScope.t['Soon']}</Link>
    <Link tabLink="#history">{RootScope.t['History']}</Link>
  </Toolbar>
  <Tabs animated>
    <Tab id="suggestions" tabActive>
      <ListOrders />
    </Tab>
    <Tab id="soon">
      <Block>
        Upcoming orders
      </Block>
    </Tab>
    <Tab id="history">
      <Block>
        <p>Tab 2 content</p>
      </Block>
    </Tab>
  </Tabs>
</Page>

Как видите, компонент Navbar отвечает за заголовок страницы.Теперь я хочу привести этот Navbar в качестве отдельного компонента, называемого компонентом Header, чтобы вместо этого блока Navbar он был только:

<Header title="page's title" />

И там в компоненте заголовка это должно быть примерно так:

import React from 'react';
import { Navbar, NavLeft, NavTitle, Link } from 'framework7-react';

export default class extends React.Component {
  render() {
    return (
      <Navbar sliding={false}>
        <NavLeft>
          <Link iconIos="f7:menu" iconMd="material:menu" 
             panelOpen="right" />
        </NavLeft>
        <NavTitle sliding>{this.props.title}</NavTitle>
      </Navbar>
    )
  }
}

Однако, когда я так поступаю, компонент Заголовок не интегрируется должным образом со страницей, а размещается в середине страницы, как незнакомец на странице.

Что я пытался сделать:

Когда я выполняю тот же рендеринг компонента Header, но без компонента React, но с функциональным рендерингом, он работает - компоненты находятся в нужном местеэто должно быть.

Например:

// Header component:
export default function(self) {
  return (
    <Navbar sliding={false}>
      <NavLeft>
        <Link iconIos="f7:menu" iconMd="material:menu" panelOpen="right" />
      </NavLeft>
      <NavTitle sliding>{self.state.title}</NavTitle>
    </Navbar>
  )
}

// main page:
render() {
 <div>
   {Header(self)} 
   ... rest of the code
 </div>
}

Итак, вот так:

{Header()}

Работает.Но вот так:

<Header />

Это не так.

Так почему же при рендеринге с использованием функции он размещается правильно с родительским компонентом, а когда он отображается как компонент React.js,не

Answer 1

Я наконец-то нашел ответ

Я использую Framework7 и в Framework7, каждый компонент, который является подкомпонентом в компоненте App, автоматически (через F7) получает компонент main-content, который является нефиксированным элементом. Если вы хотите сохранить фиксированные элементы, такие как заголовок, вы должны: <Header slot="first">

React не «трогает» и не мешает визуализации, это делает F7.

Подробнее об этом можно прочитать здесь: https://framework7.io/react/page.html#page-slots

Answer 2

Похоже, вы используете framework7 для своего приложения.Если бы мне пришлось угадывать, для <Page>, <Navbar>, вероятно, должен быть прямым потомком, иначе он не будет обрабатываться правильно.

Когда вы возвращаете панель навигации из функции, промежуточный <Header> тег не используется, поэтому он снова является прямым потомком (в этом разница между вашими примерами).

---

Если вы ссылаетесь на документы: https://framework7.io/docs/navbar.html#fixed-navbar-type

Фиксированная навигационная панель также является частью страницы, но она всегда видна на экране, независимо от прокрутки страницы.В этом случае это должен быть прямой дочерний элемент страницы, и если страница также имеет фиксированную панель инструментов, то она должна быть ДО панели инструментов:

Я знаю, что выше не для версии реакции,но я подозреваю, что то же самое относится и к реакции.