React注入的组件不能正确地与父页面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组件没有与页面正确集成，并且它被放置在页面的中间，就像页面中的陌生人一样。

我试图做的事情：

当我对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。如果我不得不猜测，对于<Page>，<Navbar>可能需要是直接的孩子，否则将无法正确处理。

当您从函数返回导航栏时，不使用中间<Header>标记，因此它也是直接子项（这是您的示例之间的差异）。

---

如果您参考文档：https://framework7.io/docs/navbar.html#fixed-navbar-type

固定导航栏也是页面的一部分，但它始终在屏幕上可见，而不依赖于页面滚动。在这种情况下，它必须是页面的直接子项，如果页面也有固定的工具栏，那么它必须在工具栏之前：

我知道以上不适用于反应版本，但我怀疑反应是否正确。

Answer 2

我终于找到了答案

我正在使用Framework7，在Framework7中，作为App组件下的子组件的每个组件都自动（通过F7）到“main-content”组件，这些组件是未固定的元素。如果你想保留像标题这样的固定元素，你应该：<Header slot="first">

React不会“触摸”或干扰任何渲染，这是由F7完成的。

你可以在这里阅读更多相关信息：https://framework7.io/react/page.html#page-slots